コンテンツの量が少ないページでは、フッター部分が浮き上がって表示され、フッターの下に余白ができてしまいます。これを回避するために、コンテンツの量が少なくてもフッターがブラウザの最下部に表示されるようにする方法をご紹介いたします。
短いページでもフッターをブラウザの最下部に表示させる方法
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: 100dvh;
}
main {
flex-grow: 1;
}gridを使った方法
gridを使う方法が最もシンプルです。以下のように指定することで、grid-template-rowsがheaderはauto、mainは1fr、footerはautoになるので、上述した方法と同じ効果を得られます。
body {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100dvh;
}スマホでフッターの位置がずれてしまう場合
min-heightは100dvhにしているので、アドレスバーの高さは除外されるはずですが、フッターの位置がずれてしまう場合は、以下のようにbodyのmin-heightはJavaScriptで計算すると確実です。
function setMinHeight() {
const windowHeight = window.innerHeight;
document.body.style.minHeight = windowHeight + 'px';
}
window.addEventListener('load', setMinHeight);
window.addEventListener('resize', setMinHeight);jQueryが良い場合は下記のようにしてください。
$(window).on('load resize', function () {
let windowHeight = window.innerHeight ? window.innerHeight : $(window).innerHeight();
$('body').css('min-height', windowHeight + 'px');
});あとがき
常に最下部に固定されるわけではなく、ページが長い時はちゃんと下に押し下げられるので、どんなサイトでも活用できますね。サイト内に短いページが存在していて、フッターを最下部に表示したい時は、ぜひお試しください。
コメントを残す