【HTML&CSS】FlexBoxでヘッダー&フッダーを固定する方法

ヘッダーとフッター固定する方法って意外と忘れますよね。
下画像のようなタイプは、FlexBoxを使えば一発です!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <header>Headerです。</header>
      <div class="contents">
        <p>コンテンツです。</p>
      </div>
      <footer>Footerです。</footer>
    </div>
  </body>
</html>
.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header,
footer {
  background-color: green;
  color: white;
  padding: 10px;
  text-align: center;
  height: 30px;
}

.contents {
  background-color: burlywood;
  color: white;
  text-align: center;
  padding: 30px;
  flex: 1;
}

・親要素のcontainerは、min-height: 100vhで、常に画面高さ以上になるように設定しています。

・flex-direction: columnで一旦縦並びに直しています。

contents要素に、flex:1を適用しています。(ここがポイント!!)
flex:1を使うと、他の要素の間にできた隙間を埋めるように、高さが変動します。

これにより、ヘッダーとフッターを固定できるのです!!