いわゆるStickyFooterってやつですが、サイトのコンテンツ量が少ない時にフッターの下に隙間が空いてしまう・・という微妙な状況下に陥った方は多いことでしょう。
というかぶっちゃけ、HTML/CSS書いているほぼ全員じゃないですかね。結論だけ知りたいという方はこちら。
で、そういう時の解決方法として、以下の様なものが検索したら出てきていました。
従来の解決方法
ネガティブマージン
フッターの高さを事前に決め打ちできれば、ネガティブマージンで簡単に解決できます。
ただし、コンテンツの増減が今後も想定される場合はメンテの手間が増えるので、あまりやりたくない選択肢でした。
Javascript使う
有名なのはfooterFixed.jsでしょう。
可変する高さのフッターにも対応できて、CSSもシンプル。良いスクリプトですし、私も今までに大変お世話になりました。
しかしこんなことにjavascriptを使いたくない……という気持ちはずっとあったのです。
これからの解決方法
これからの正解はflexboxです。CSS3で追加されたプロパティですが、これさえあれば問題は全て解決します。
<!DOCTYPE html>
<html>
<head>
<style >
.body {
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
background: red;
}
section {
flex: 1;
background: yellow;
}
footer {
background: blue;
}
</style>
</head>
<body class="body">
<header>
site name.
</header>
<section>
a few contents.
</section>
<footer>
copyrights.
</footer>
</body>
</html>
詳しくは上のコードを読んでください。
とりあえずflexboxとvh単位に対応しているブラウザであれば、これですっきり解決します。
まぁ今から作るサイトならOKじゃないでしょうか。
以上！！
コメント