Fixed header without scrollbar

This solution uses no position:fixed.

HTML

<header>A header unaffected by scrollbar</header>
<section>
Just a big blue box to generate a scrollbar.
Just a big blue box to generate a scrollbar.
Just a big blue box to generate a scrollbar.
Just a big blue box to generate a scrollbar.
Just a big blue box to generate a scrollbar.
Just a big blue box to generate a scrollbar.
Just a big blue box to generate a scrollbar.
Just a big blue box to generate a scrollbar.
Just a big blue box to generate a scrollbar.
Just a big blue box to generate a scrollbar.
Just a big blue box to generate a scrollbar.
Just a big blue box to generate a scrollbar.
Just a big blue box to generate a scrollbar.
Just a big blue box to generate a scrollbar.
Just a big blue box to generate a scrollbar.
Just a big blue box to generate a scrollbar.
</section>

CSS

/* mandatory */
body {
  margin: 0;
}
header {
  height: 60px;
}
section {
  height: calc(100vh - 60px);
  overflow-y: auto;
}

/* optional */
body {
  background-color: black;
  color: white;
}
header,
section {
  box-sizing: border-box;
  color: white;
}
header {
  background-color: tomato;
}
section {
  background-color: cornflowerblue;
  font-size: 2rem;
}