【CSS】コンテンツが少ない場合でも、CSSだけでフッターを下部に固定する方法

モニターに表示された1と0 WEB

コンテンツが多い場合だとフッターが自然に画面下部にくっついているが、少ない場合だとフッターが上に上がってしまう場合に、CSSだけでフッターを下部に固定する方法。
たまに使うけど、その度に忘れるので備忘録。

まずはHTML。

<html>
<head>
<title>hoge</title>
</head>
<body>
  <div class="wrapper">
    <main class="main">
      <p>メインコンテンツ</p>
    </main>
    <footer class="footer">
      <p>(c)フッター</p>
    </footer>
  </div>
</body>
</html>

こんな感じのHTMLで何も設定しないと、下のようにフッターが上がってしまいます。

フッター画像1わかりやすいように背景やフッター部分などは少し装飾しています。

そこで、CSSに4行だけ書き加えると、フッターを下部固定にすることが出来ます。

body,
.wrapper {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}

.footer {
  margin-top: auto;
}

フッター画像2このように、コンテンツが少ない場合でも、フッターが下部に固定されます。

Chrome、Firefox、Edge、IE11で確認済みです。
Macは持ってないので、Safariでは未確認…

ちなみに、最近(おそっ)flexboxを覚えたんですが、便利すぎですw

タイトルとURLをコピーしました