<body>
<header>
<p>headerです。<p/>
</header>

<main>
<p>コンテンツ（高さ200px）を指定</p>
</main>

<footer>
<p>footerです。</p>
</footer>
</body>
body,header,main,footer,p {
  padding:0;
  margin:0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background:#ffe4e4;
  padding:20px;
}

main {
  padding:20px;
  height:200px;
  background:#fff9e2;
}

footer {
  margin-top: auto;
  background:#d3ffe1;
  padding:5px 20px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.