CodePen Embed - フッター固定して常に表示

<body>
  <div class="wrap">
    <header>ヘッダー</header>
    <main>
      <p>要素1</p>
      <p>要素2</p>
      <p>要素3</p>
      <p>要素4</p>
      <p>要素5</p>
      <p>要素6</p>
      <p>要素7</p>
      <p>要素8</p>
      <p>要素9</p>
      <p>要素10</p>
    </main>
  </div>
  <footer>フッター</footer>
</body>

body {
  margin: 0;
  padding: 0;
}
.wrap {
  height: calc(100vh - 50px);
  overflow-y: scroll;
}
header {
  background-color: red;
}
footer {
  background-color: green;
  height: 50px;
}

This Pen is owned by Qoomei@Web制作 on CodePen.

See more by @qmei03 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.