コンテンツの量が少ないページでは、フッター部分が浮き上がって表示され、フッターの下に余白ができてしまいます。これを回避するために、コンテンツの量が少なくてもフッターがブラウザの最下部に表示されるようにする方法をご紹介いたします。
短いページでもフッターをブラウザの最下部に表示させる方法
positionを使った方法
まず、HTMLは以下のように記述します。特に変わった点はありませんね。
<body>
<header>ヘッダー</header>
<main>メインコンテンツ</main>
<footer>フッター</footer>
</body>続いて、CSSでは以下のように指定します。
body {
position: relative;
min-height: 100%;
margin-bottom: 50px;
}
footer {
position: absolute;
bottom: 0;
height: 50px;
}フッターの高さ分をbodyのmargin-bottomに指定します。
このようにスタイルを指定することで、ページが短くてもフッターがブラウザの最下部に表示されます。
ページが長い場合は、フッター部分はメインコンテンツの下に押し下げられて表示されます。
flexを使った方法
Flexboxを使うともっと簡単です。CSSを以下のようにすると、短いページでもフッターが最下部に押し下げられます。HTMLはpositionの時と同じでOKです。
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex-grow: 1;
}ただ、上記CSSだとスマホの時にアドレスバーの高さ分、フッターの位置がずれてしまうことがあります。なので、その対策としてbodyのmin-heightはJavaScriptで計算すると確実です。
$(window).on('load resize', function () {
let window_height = window.innerHeight ? window.innerHeight : $(window).innerHeight();
$('body').css('min-height', window_height + 'px');
});あとがき
常に最下部に固定されるわけではなく、ページが長い時はちゃんと下に押し下げられるので、どんなサイトでも活用できますね。サイト内に短いページが存在していて、フッターを最下部に表示したい時は、ぜひお試しください。