コンテンツの量が少ないページでは、フッター部分が浮き上がって表示され、フッターの下に余白ができてしまいます。これを回避するために、コンテンツの量が少なくてもフッターがブラウザの最下部に表示されるようにする方法をご紹介いたします。
スポンサードリンク
短いページでもフッターをブラウザの最下部に表示させる方法
まず、HTMLは以下のように記述します。特に変わった点はありませんね。
<body> <main>メインコンテンツ</main> <footer>フッター</footer> </body>
続いて、CSSでは以下のように指定します。
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 50px;
}
footer {
position: absolute;
bottom: 0;
height: 50px;
}
フッターの高さ分をbodyのmargin-bottomに指定します。
このようにスタイルを指定することで、ページが短くてもフッターがブラウザの最下部に表示されます。
ページが長い場合は、フッター部分はメインコンテンツの下に押し下げられて表示されます。
あとがき
常に最下部に固定されるわけではなく、ページが長い時はちゃんと下に押し下げられるので、どんなサイトでも活用できますね。サイト内に短いページが存在していて、フッターを最下部に表示したい時は、ぜひお試しください。