Layout with header and footer and content without overlapping - html

Question

I would like to create a layout for a webpage with the following conditions :
A header div that sticks to the top of the browser of a defined height.
A footer div that sticks to the bottom of the browser of a defined height.
A main div that fills all the space between the header and the footer.
The 3 parts shall not overlap when the height of the browser is reduced to lesser than the height of the footer and the header and the content of the main div.
If the height of the browser is reduced to lesser than that, scrollbars should appear for the whole document, not just for the main content.
In other words and with numerical values :
Let's assume the header and the footer are 100 px each and the browser height which is of course variable is 800 px; I want the main div which, lets suppose, has a content that takes only 200px to occupy the whole remaining 600px.
When the browser is reduced to a height lesser than 100px (header) + 100px (footer) + 200px (content of main div) = 400px; I don't want the three parts to overlap and I wand scrollbars to appear for the whole document not just the main content.
Is this achievable with only HTML and CSS and without using flexboxes nor javascript ?
Here is the sample code (snippet) :
* {
margin: 0;
padding: 0;
}
body{
}
#container {
min-height:100vh;
position:relative;
}
#header {
background-color : red;
height : 100px;
width:100%;
}
#main {
background-color : blue;
width:100%;
}
#footer {
position:absolute;
bottom:0;
background-color : yellow;
height : 100px;
width:100%;
}
<div id="container">
<div id="header">I'm a header that gets overlapped by the footer when the browser height is reduced</div>
<div id="main">I'm a main who refuses to stretch and fill the remaining white space and which is overlapped by the footer when the browser height is reduced</div>
<div id="footer">I'm a footer and I overlap all the other divs when the height of the browser is reduced</div>
</div>

Answer 1

You should be able to achieve this with a combination of overflow for the parent and using calc() for the height of main. Try the snippet below and play around with the height of the container. I would suggest to also give a min-height to main, so that it doesn't collapse entirely, but that depends on your needs.
In general, however, I think flex is the cleaner solution, see the other answer(s).
#container {
overflow: auto; /* Show scrollbars if content larger than #container */
height: 320px;
}
header {
width: 100%;
height: 100px; /* Absolute height */
background-color: red;
}
main {
width: 100%;
height: calc(100% - 200px); /* Dynamically calculated height */
overflow: hidden;
background-color: blue;
}
footer {
width: 100%;
height: 100px; /* Absolute height */
background-color: yellow
}
<div id="container">
<header>I'm a header that gets overlapped by the footer when the browser height is reduced</header>
<main>I'm a main who refuses to stretch and fill the remaining white space and which is overlapped by the footer when the browser height is reduced</main>
<footer>I'm a footer and I overlap all the other divs when the height of the browser is reduced</footer>
</div>
Also note that HTML5 gives you the actual elements header, main and footer, so you should use these in favor of divs.