ヘッダー・フッターの固定とスクロールバー

ヘッダー・フッターを固定するとき、position: fixedはやめたほうがいいんじゃないかという話。

どゆこと？
どうやってんの？
なにがいいの？
- そのいち
- そのに
やりかた
- Flexbox 編
- CSS Grid 編
おすすめ
ソースコード
おまけ

どゆこと？

赤部分がヘッダー、青部分がフッター、緑部分がコンテンツ（main 要素）です。

https://tee-talog.github.io/fixed-header-and-footer/fixed.html

これを

https://tee-talog.github.io/fixed-header-and-footer/flexbox.html

https://tee-talog.github.io/fixed-header-and-footer/grid.html

こうじゃ

どうやってんの？

固定と言ったらposition: fixed。その代わりにdisplay: flexやdisplay: gridで固定する。

真ん中のコンテンツにoverflow-y: scrollを設定し、スクロールできるようにする。

なにがいいの？

そのいち

スクロールバーがヘッダー・フッターにかぶらない

スクロールできないところにスクロールバーが表示されるのは、UI 的によろしくないのでは？

そのに

ページ送りしたときにヘッダー・フッターを考慮してくれる

基本サイトはページ送りで見ているので、position: fixedだとその分が考慮されずにスクロールする。つまり数行表示されないことがある。つらい。

でも今回の方法だと、ヘッダー・フッターを考慮するので、そういうことがない。

やりかた

Flexbox 編

親要素に以下を設定する。

/* Flexbox コンテナの高さをブラウザの高さにする */
height: 100vh;
/* Flexbox 使用 */
display: flex;
/* 並びを縦に */
flex-direction: column;
/* 上下の隙間をなくす */
justify-content: space-between;

ヘッダー・フッターの高さはそれぞれheightで指定してください。

CSS Grid 編

まず親要素に以下を設定する。

/* グリッドコンテナの高さをブラウザの高さにする */
height: 100vh;
/* CSS Grid 使用 */
display: grid;
/* 行の高さを指定する（ヘッダー・コンテンツ・フッター）
grid-template-rows: 70px 1fr 70px;
/* 列の幅。念の為指定しておく */
grid-template-columns: 1fr;
/* エリアの名前を決める */
grid-template-areas:
    "header"
    "main"
    "footer";

そして子要素にはそれぞれ以下を設定する。

/* ヘッダーの場合 */
grid-area: header;
/* コンテンツの場合 */
grid-area: main;
/* フッターの場合 */
grid-area: footer;

ソースコード

github.com

おまけ

似たようなものにposition: stickyというものもあり、とても便利。ついてくるヘッダーはこれで実装するのが楽。

ただし IE、テメーはダメだ。

ひびのログ

日々ではないけどログを出力していくブログ