My website consists of a header div and a body div.
I am trying to make the body div expand to fill the entire screen height.
When I set the height to 100vh, it expands correctly but it does not take into account the height of the header div, resulting in a scrollbar appearing. I do not want this scrollbar to be visible.
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.header {
position: relative;
}
.body {
position: relative;
top: 0px;
bottom: 1rem;
flex-grow: 1;
}
/* for visualization purpose only */
.header {
background: blue;
color: white;
}
.body {
background: green;
color: white;
}<body>
<div class="header">header</div>
<div class="body">body</div>
</body>You can view my codepen example at: https://codepen.io/sforest1975/pen/YzMaEQO
I aim for the body div to occupy the full screen height without exceeding 100% or showing a scrollbar.
Desired outcome:
I prefer not to specify the height of the header if possible.
Avoiding the use of px is important to ensure consistent results across different font sizes and browsers.