Menu
How can I do height: calc(100% - 18px); in CSS2? I have 3 div on a page.
<body>
<div id="top">top</div>
<div id="middle">middle</div>
<div id="bottom">bottom</div>
</body>
top to be 100% height minus 200pxmiddle to be 200px and be right below topbottom to be right after bottomThe idea is that top and middle take up 100% of the browser window when the scroll bar is at the very top but the user should be able to scroll down to see bottom. And when the user scrolls top and bottom are still the same size (unless the user resizes the window).
I want to do this without JavaScript and it needs to be CSS2 cause we do not have a CSS3 compliant browser yet.
886
You can do this with a mix of negative margins and padding alongside box-sizing: border-box.
Note: In the below example I've used 50px instead of 200px as 200px was a bit too large for the snippet output. You'll want to change the instances of -50px and 50px with -200px and 200px for your desired output.
html, body {
height: 100%;
margin: 0;
}
#top {
background: tomato;
box-sizing: border-box;
height: 100%;
margin-bottom: -50px;
padding-bottom: 50px;
}
#middle {
background: cornflowerblue;
height: 50px;
}
#bottom {
background: papayawhip;
}<div id="top">top</div>
<div id="middle">middle</div>
<div id="bottom">bottom</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
