こんにちは、さち です。
今回は、ウェブサイトを作る時に、CSS だけで「フッター」をウィンドウの下部に追従する（貼り付くようにする）方法について書いていきます。
常に追従するのは簡単です。しかし、ウィンドウのサイズが大きい時だけに限定しようとすると、CSS をちゃんと理解していないと意外と難しいです……。
サンプル・完成予想図
このような HTML を準備しました。
<div id="wrapper">
<header>header</header>
<main>
ここから<br>
main<br>
ここまで<br>
</main>
<footer>footer</footer>
</div>
ウィンドウのサイズがページの全長より大きい時に、「フッター（footer）」がウィンドウの下部に追従するようにしてみましょう。
イメージとしてはこんな感じ。（ウィンドウのサイズの変化を再現するため、body の高さを動かしています）
ウィンドウのサイズがページの全長（ header，main，footer の高さの合計値）より大きくなると、「フッター」がウィンドウの下部に追従します。
逆に、ウィンドウのページの全長より小さくなると、「フッター」は「メイン」のデフォルトの高さで止まり、ウィンドウにスクロールバーが表示されます。
これを CSS だけで実装してみましょう。
ちなみに、position: sticky; ではできません。（「スクロール」に追従する機能なので、ウィンドウサイズに合わせたい今回とは異なる）
「フレックスボックス」を使って解決
フレックスボックスは、display: flex; を記述することで利用できます。
これを適用した要素は「フレックスコンテナ」となり、直下の子要素は幅・高さが連動して整列されるようになります。
実際にフレックスボックスを使って「フッター」をウィンドウ下部に追従させてみましょう。
CSS
CSS はこんな感じ。
html, body, #wrapper {
width: 100%;
height: 100%;
}
#wrapper {
display: flex;
flex-direction: column;/* 子要素を縦に整列 */
}
header {
background-color: red;
flex: none;/* 0 0 auto と同じ */
height: 40px;
}
main {
background-color: orange;
flex: 1 0 auto;
}
footer {
background-color: green;
flex: none;/* 0 0 auto と同じ */
height: 40px;
}
解説
とりあえずできれば良いという人は、前述の CSS をコピペして使うだけでOKです。
「フレックスボックス」の仕組みや挙動を理解したい人は、ここから先も読んでみて下さい。
「伸び率」「縮み率」の指定
「フレックスボックス」の特徴は、子要素の「伸び縮み」を指定できることです。
伸び縮みの調整は、flex-grow（伸び率）・flex-shrink（縮み率） プロパティを子要素に設定することで行います。
flex-grow: 0; とすると、その要素は伸びません。逆に、flex-grow に 0 より大きい値を指定することで伸びるようになります。（兄弟要素の flex-grow の値との比率で伸びる量が変わる）
この機能を使って、「ヘッダー」「フッター」は伸びないように、「メイン」を伸びるようにすることで、「フッター」を常に下部に追従させることができます。
min-height や min-width で最小値を設定している場合は、flex-shrink（縮み率） を設定しても最小値より小さくなることはありません。まとめて指定できる
flex-grow（伸び率） と flex-shrink（縮み率）、さらに flex-basis（基本幅） を加えた3個は、flex プロパティでまとめて指定できます。
例えば、flex-grow: 1; flex-shrink: 0; flex-basis: auto; は、まとめて flex: 1 0 auto; と記述できます。
また、flex の値は「キーワード」を使うことで一括指定もできます。（下の表を参照）
例えば、flex: none; は、flex: 0 0 auto; と記述するのと同じ意味になります。
CSS の詳細
header と footer に設定した flex: none; は、伸びない・縮まない・基本幅はおまかせという状態です。
header {
background-color: red;
flex: none;/* 0 0 auto と同じ */
height: 40px;
}
/* 省略 */
footer {
background-color: green;
flex: none;/* 0 0 auto と同じ */
height: 40px;
}
そして、一番重要なのは main に設定した flex: 1 0 auto; です。これは、伸びる・縮まない・基本幅はおまかせという状態。
main {
background-color: orange;
flex: 1 0 auto;
}
これによって main が伸びるので、「フッター」がウィンドウ下部に追従します。
ちなみに、main に flex: 1 0 auto; の代わりに margin-bottom: auto; を設定する方法もありますが、この方法だと「メイン」と「フッター」の間にすき間ができてしまいます。
今回の例の場合、main のオレンジと footer の緑の間にすき間ができて、body の白い背景が見えてしまうので非推奨です。
関連記事
この記事と同じ内容を「グリッドレイアウト」で実装する方法です。こちらの方がシンプルで分かりやすいと思います。
コメント