フッタを最下部に表示する5つのテクニック

[CSS]フッタを最下部に表示する5つのテクニック-コンテンツ量が少ない時は最下部に、多い時は成り行きに | コリス

HTML

<body>
  <div class="content">
    コンテンツ
  </div>
  <footer class="footer">フッタ</footer>
</body>

CSS

.content {
  min-height: calc(100vh - 50px);
}
.footer {
  height: 50px;
}