CodePen Embed - コンテンツが少ない場合

<body>
  <header class="header">ヘッダー</header>
  <main class="main">
    <p>コンテンツ</p>
    <p>コンテンツが少ないと、こんな感じでfooterが上に詰まってしまい、画面下部に無駄な空間が余ってしまいます。</p>
  </main>
  <footer class="footer">フッター</footer>
</body>

.header {
  background-color: red;
  text-align: center;
  font-weight: bold;
  color: white;
  padding: 1em;
}
.main {
  background-color: green;
  text-align: center;
  font-weight: bold;
  color: white;
  padding: 1em;
}
.footer {
  background-color: blue;
  text-align: center;
  font-weight: bold;
  color: white;
  padding: 1em;
}

This Pen is owned by kuroudoart on CodePen.

See more by @kuroudoart on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.