More than 1 year has passed since last update.

footerを常に最下部に固定する方法(簡単)

Last updated at 2022-12-27Posted at 2018-03-06

コンテンツ量が多い時も少ない時も、footerを常に最下部に持ってきたい。
そんな所で結構つまづいてしまったので自分用にメモ。

html・cssの記述は以下

test.html

<body>
  <div id="wrapper">
    <main>
 
      　<!--コンテンツの記述-->
 
    </main>
 
    <footer>
 
      　<!--フッターの記述-->
 
    </footer>
  </div>
</body>

test.css

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

他にもやり方は色々あると思いますが
このやり方だといじる所も少なくて簡単にできました。