<div class="container">
  <header>ヘッダーだよ</header>
  <main>
    こ<br>こ<br>に<br>メ<br>イ<br>ン<br>コ<br>ン<br>テ<br>ン<br>ツ<br>を<br>か<br>く<br>よ<br>！<br>
    は<br>み<br>だ<br>し<br>て<br>も<br>ス<br>ク<br>ロ<br>ー<br>ル<br>し<br>て<br>く<br>れ<br>る<br>よ<br>！<br>
  </main>
  <footer>フッターだよ</footer>
</div>

@charset "utf-8";

body {
  margin: 0;
  overflow: hidden;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

header {
  background-color: rgba(245, 178, 177, 0.5);
}

main {
  flex: 1;
  background-color: rgba(255, 253, 237, 1);
  overflow-y: scroll;
}

footer {
  background-color: rgba(201, 187, 155, 0.5);
}