<p>コンテンツ量が少ないときにフッターとページ最下部との間にできてしまう隙間の解消方法について説明します。</p><p>ヘッダー＋メインコンテンツ＋フッターという構造を想定しています。</p><p>HTML＋CSSでの実装方法を解説します。</p><h2 id="h4f4cfd3663">HTML＋CSSの設定のポイント</h2><p>隙間を作らず、フッターを最下部に表示したいときのポイントは4つです。</p><ol><li>ヘッダー＋メインコンテンツ＋フッターの外側にwrapper用の要素を作成して、<code>display: flex</code>を指定</li><li>wrapper要素に<code>flex-direction: column</code>を設定</li><li>wrapperクラスに<code>min-height: 100vh</code>を設定</li><li>footerに<code>margin-top: auto</code>を設定</li></ol><h3 id="hc684259255">サンプルコード</h3><p>イメージしやすいようにサンプルコードを作成しました。</p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fsakelog%2Fembed%2Fpreview%2FPoQjVXG%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DPoQjVXG&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fsakelog%2Fpen%2FPoQjVXG&image=https%3A%2F%2Fshots.codepen.io%2Fsakelog%2Fpen%2FPoQjVXG-512.jpg%3Fversion%3D1653124612&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p>サンプルはわかりやすいようにパーツごとに色を付けています。</p><p>main要素の大きさに関わらずfooterが最下部に表示されているのが分かると思います。</p><p>実際に使用する際は、wrapperクラスの背景色にmainの背景色と同じ色を指定するか、mainに<code>flex-grow: 1</code>を指定すると良いです。</p><h3 id="h800b32a212">コードの解説</h3><h4 id="h7b8fd41f23">wrapper要素の作成</h4><p>外側のwrapper要素を設定し、wrapper要素の高さを設定しています。</p><p><code>min-height: 100vh</code>で、最小の高さを画面の縦幅いっぱいにしています（超えた場合は自動的に広がる）。</p><p><code>display: flex</code>と<code>flex-direction: column</code>で内側の要素を縦に配置しています。</p><h4 id="h4cb1ff7ae9">footerのmargin設定</h4><p>外側の要素の高さを設定しているので、footerに`margin-top: auto`を設定することで、外側の高さ分までmarginが自動で設定されます。</p><h4 id="h3de35099b3">参考</h4><p><code>display: flex</code>については、下記ページで詳しく解説されています。</p><p><a href="https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet" target="_blank" rel="noopener noreferrer">日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス</a></p><p><br></p>

コンテンツ量が少ないときにフッターとページ最下部との間にできてしまう隙間の解消方法について説明します

タグ: HTML

HTMLとCSSだけでフッターの隙間を解消する方法