How to set <div> height without leaks? - html

Question

I'm desiging my page as:
Fixed top and side menus, main page scrollable depending on contents, everything inside a container.
I can't figure out how to stop the container from leaking the background in the bottom. I have tryed min-height: 100%, height: calc(100vh-50px), but none of this will work.
What I have so far
You can see the background leak in https://jsfiddle.net/0afeh6cb/
How can I get rid of that?
html,
body {
margin: 0px;
padding: 0px;
background-color: green;
}
#container {
background-color: #fff;
position: relative;
width: 1000px;
min-height: calc(100vh - 50px);
margin: 0px auto 0px auto;
}
#topMenu {
position: fixed;
top: 0px;
margin: 0px;
padding: 5px 10px 5px 10px;
background-color: #e0e0e0;
width: 980px;
height: 40px;
}
#sideMenu {
position: fixed;
top: 50px;
margin: 0px;
padding: 5px;
background-color: #c0c0c0;
width: 180px;
height: 100%;
}
/* ------------- Container ------------- */
#main {
margin-top: 50px;
margin-left: 190px;
width: 790px;
padding: 10px;
background-color: #f0ffff;
}
#footer {
margin-left: 190px;
width: 790px;
}
<div id="container">
<div id="topMenu">
<p>Top Menu</p>
</div>
<div id="sideMenu">
<h3>Side menu</h3>
</div>
<div id="main">
<h1>My content here</h1>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>

Answer 1

I hope this will help:
body,
#container {
height: 100vh;
}
#container {
/*height: calc(100vh - 50px);*/ You can remove this line
}

Answer 2

Remove the fixed positioning from your #topMenu.
#topMenu {
// position: fixed; <-- removed
// top: 0px; <-- removed
margin: 0px;
padding: 5px 10px 5px 10px;
background-color: #e0e0e0;
width: 980px;
height: 40px;
}
Remove the positioning from your #container and your calculated height and set a height of 100vh to prevent background bleeding entirely.
#container {
height: 100vh; // <-- added
background-color: #fff;
// position: relative; <-- removed
width: 1000px;
// min-height: calc(100vh - 50px); <-- removed
margin: 0px auto 0px auto;
}
Remove the margin top from your #main container.
#main {
// margin-top: 50px; <-- removed
margin-left: 190px;
width: 790px;
padding: 10px;
background-color: #f0ffff;
}

Answer 3

Please change the container class css as below:
100vh always take the total height of its parent div.
#container {
background-color: #fff;
position: relative;
width: 1000px;
_min-height: calc(100vh - 50px);//remove this line
height: 100vh; //Set this height.
margin: 0px auto 0px auto;
}