More than 3 years have passed since last update.

フッターを一番下に固定する方法

Posted at 2020-05-06

コンテンツの内容が少なくフッターが画面の途中にきてしまいフッターの下にスペースが開いてしまった時の解決方法。

HTML

sample.html

<body>
  <div id="wrapper">
    <main>
 
      コンテンツの内容
 
    </main>
 
    <footer>
 
      フッターの内容
 
    </footer>
  </div>
</body>

CSS

sample.css

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

これでフッターがつねに一番下に配置されるようになりました。