はじめに

CSSは目的の配置の実現方法が色々あるため、今自分が納得した書き方のデモを作った。

参照

CSSでコンテンツが少なくてもフッターをウィンドウ下部に表示する方法 | NxWorld

詳細

中身を忘れたら以下をコメントアウトして確認すること。

1. marginとpaddingを0にする

* {
  margin: 0;
  padding: 0;
}

初期値ではhtml,body,li等あらゆるものにmarginやpaddingが設定されている。
これは便利でもあるが、予期していなかった空白が作られて困ることがあるので、全てリセットする。
特にhtmlやbodyは必ずこれをしておく。

2. box-sizingの設定

* {
  box-sizing: border-box;
}

初期値ではborderとpaddingが、幅と高さに含まれていない。
これを設定しないと想定した枠内に収まりきらないことがある。

参照

【CSS】box-sizing:border-boxの使い方｜効かない時は？

3. htmlとbodyのサイズを100%にする

html, body {
  width: 100%;
  height: 100%;
}

画面全体を描画領域にするため100%指定しておく。
全体ではなく一部に何かコンテンツを表示したいときは、ここをいじるのではなく、表示したいコンテンツのmarginやpaddingをいじることで実現すること。

4. レイアウトを決める

body {
  display: flex;
  flex-direction: column;
}

今回は3カラムのためFlexboxを使用しているが、より複雑なレイアウトを作る場合はGridLayoutを使うこと。

5. (Flexbox) flexの設定

header, footer {
  flex: 0 0 auto;
}

flexの値はgrow-shrink-basisの順で設定する。
デフォルトはflex: 0 1 auto(大きくはならないが、小さくはなる)
また、上のデモでflexを設定しなかった場合toggle contentボタンを押したタイミングでheaderとfooterが潰れる。
これはflex-shrinkが設定されていないためである。参照
値を1つや2つで指定する方法もあるが、設定し忘れや思わぬバグ回避のため3つ設定すること。

参照

Flexbox: Don't Forget about flex-shrink by Noah Blon on CodePen

siunのメモ

Webページを作るときのCSS設定