どうも、Ajiです。
WEBサイトを作っていると、ページのコンテンツが少ない時にフッターが画面の変な位置に表示される問題に遭遇することがありますね。
なんかダサいのでコンテンツが少なくてもフッターが画面の一番下に表示される方法をご紹介します。
まず、HTMLの構造は以下のようになります。
<body>
<header>
<h1>タイトルタイトルタイトル</h1>
</header>
<main>
<p>テキストテキストテキストテキスト</p>
</main>
<footer>
<p>フッター</p>
</footer>
</body>CSSはこちら。
body {
display: flex;
flex-flow: column;
min-height: 100vh;
}
main {
margin-top:auto;
}このCSSのポイントは、body要素にdisplay: flex;とflex-flow: column;を設定して、子要素を縦方向に並べること、そしてmin-height: 100vh;を設定して、body要素が少なくともビューポートの高さを持つようにすることです。
で、main要素にmargin-top: auto;を設定することで、フッターを画面の最下部に押し下げる効果を得ます。
以上が、コンテンツが少ない時にフッターを最下部に表示する方法です。
これで、どんなにコンテンツが少なくてもフッターはきちんと画面の最下部に表示されます。
簡単ですね。
応援クリックよろしくお願いします！
