Yagi-System-coding

CSSのflexを用いてフッターを最下部に固定する方法

ここでは、CSSのflexを用いてフッターを最下部に固定する方法について説明していきます。

Contents

1 HTML
2 CSS
3 出力結果
4 まとめ

HTML

<body class="body">
    <header class="header">ヘッダー</header>
    <main class="main">メイン</main>
    <footer class="footer">フッター</footer>
</body>

CSS

CSSでは以下の要素を記述します。

「html」タグを「height」プロパティを「100%」にする。
「body」の「height」プロパティを「100%」に、「display」プロパティを「flex」に、「flex-direction」プロパティを「column」にする。
「main」の「flex」プロパティの値を「auto」にする。

html {
  height: 100%;
}
.body {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.body * {
  padding: 20px;
}
.header {
  color: #fff;
  background-color: #111;
}
.main {
  color: #111;
  flex: auto;
}
.footer {
  color: #fff;
  background-color: #111;
}

出力結果

まとめ

上記のようにCSSを記述することで、flexを用いてフッターを最下部に固定することができます。