My HTML has a header div and a body div.I want the body div to grow to the maximum height of the screen.
If I set the height to 100vh, it worked but ignored the header div height.So a scrollbar appears. I do not want a scrollbar.
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 check my codepen: https://codepen.io/sforest1975/pen/YzMaEQO
I want the body div to be maximum height of the screen, but without scrollbar and not over 100% of the screen height.
Expected result:
I do not want to set the height of header, if possible.I do not want to use px because different results may occur by font-size or browser.