CSS3を使ってfooterを最下部に固定する方法 #HTML5

ページ内のコンテンツの量が少なくてfooterが浮いてしまっている時に、CSSを使ってfooterを最下部に固定する方法を紹介します。

まずはコードから

sample.html

<body>
    <main>

      　<!--コンテンツの記述-->

    </main>

    <footer>

      　<!--フッターの記述-->

    </footer>
  </div>
</body>

style.css

body{ 
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

footer{
  margin-top: auto;
}

bodyダグのflex-directionをcolumnにして、要素の並びを垂直の上から下方向に指定します。
bodyタグのmin-heightを100vhにすることで、画面の高さいっぱいまで要素を広げることができます。
footerタグのmargin-topをautoにすることで、余分な余白（footerの上にあるはずの余白）を全て指定できるので、fotterが画面の１番下に配置されます。