More than 1 year has passed since last update.

フッターを最下部、コンテンツを上下中央にする

Last updated at 2023-12-27Posted at 2020-10-02

コンテンツが少ない場合でもフッターを最下部にするコードはよく見かけますが、
合わせてコンテンツを上下中央にする場合に悩んでしまったので投稿します。

HTML

body 要素直下に header、main、footer 要素を配置します。

index.html

<body>
  <header>
    <p>ヘッダー</p>
  </header>
  <main>
    <p>メイン</p>
  </main>
  <footer>
    <p>フッター</p>
  </footer>
</body>

main 要素がない場合でも footer 要素がページ下部に配置されるようにしてあります。

style.css

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1;
}
footer {
  position: sticky;
  top: 100vh;
}