More than 5 years have passed since last update.

CSS3の「flexbox」でフッターをページ最下部に固定して浮くのを防ぐ

Posted at 2018-04-04

コンテンツの縦幅が狭い際、フッターが画面最下部から浮いてしまいますが、flexboxを使って最下部に固定する方法を見つけたのでメモします。

hmtl

<body>
  <div id="wrapper">
    <main>メインコンテンツが入ります。</main>
　　<footer>フッターが入ります。</footer>
  </div>
</body>

css

body,#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
 
footer {
  margin-top: auto;
}