<body>
  <header>
  <h1>LogoIpsum</h1>
  </header>
  <section></section>
</body>
header {
  background-color: yellow;
}

section {
  background-color: gray;
  height: calc(100vh - var(--sl-header-height));
}

h1 {
  font-size: 4rem;
  padding: .5em;
  margin: 0;
}

// check header height
function checkHeaderHeight() {
  // select header element
  const header = document.querySelector('header');
  // get rendered styles
  const styles = window.getComputedStyle(header);
  // set header height rendered style
  const headerHeight = styles.height;
  // set CSS as a value
  document.documentElement.style.setProperty("--sl-header-height", headerHeight);
}
addEventListener("resize", checkHeaderHeight);
addEventListener("orientationchange", checkHeaderHeight);
checkHeaderHeight();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.