More than 5 years have passed since last update.

CSSでスティッキーフッターを実装する

Posted at 2019-11-18

常にフッターをページの一番下に配置させる、スティッキーフッターの実装をします。

index.html

<body>
  <div class="content">content</div>
  <footer>footer</footer>
</body>

style.css

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content {
  margin-bottom: auto;
}

これで常にフッターをページの一番下に配置させることができます。