<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();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.