HTMLとCSSのメモ（コピペ用）
HOMEに戻る

ウィンドウの高さよりコンテンツ量が少ない時にフッターをブラウザ最下端に設置する方法

サンプルコード

ブラウザの高さよりコンテンツ量が少ないページで、フッターの内容を最下端で表示したい場合のコード

display:flexを使う場合

HTML
<body>
  <header class="header">
    header
  </header>
  
  <main>
    contents
  </main>
  
  <footer class="footer">
    footer
  </footer>
</body>
CSS
html, body{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header{
  /* 任意 */
}

.footer{
  margin-top: auto;
}

または、下記

CSS
html, body {
  height: 100%;
  display: flex;
  flex-direction: column;
}

header {
  /* 任意 */
}

main {
  flex: 1 0 auto;
  display: block;
}

footer {
  /* 自動で下に行く */
}

display:gridを使う場合

HTML
<body>
  <header class="header">
  header
  </header>

  <main>
  contents
  </main>

  <footer class="footer">
  footer
  </footer>
</body>
CSS
html,
body {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;/* ヘッダー/メイン/フッター */
}

5行目：メインの部分、<main></main>の内容が伸びる構造。
※<header>, <footer>が存在するデザインで利用。