stretch div height to start of next div - html

Question

I am trying to get my main content and menu divs to stretch to the top of the footer div. My HTML is:
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
}
#header {
padding: 10px;
background: #3095C7;
}
#main {
padding-bottom: 80px;
bull
}
#content {
padding-left: 310px;
background: #FFEFC4;
}
#menu {
background: #67b5d1;
width: 300px;
position: absolute;
float: left;
}
#footer {
text-align: center;
padding: 30px 0;
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
background: #3095C7;
}
<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="menu">
menu here
</div>
<div id="content">
content here
</div>
</div>
<div id="footer">footer content</div>
</div>
I have set the main, content, and menu height to 100%, but that of course just is to the very bottom of the wrapper div, which is beyond footer. What I am trying for is for menu and content to stretch from the header all the way down to the top of footer, so it fills the whole page. I have played around with vh but isn't spot on constantly when re-sizing the window.
Are there any tricks that will make the divs fill all the blank space and not overlap the footer?

Answer 1

Very simple with flexbox (browser support is IE10+ and everything else that's remotely modern)
Set up #wrapper to be display: flex; flex-flow: column nowrap
Set up #main to be flex: 1 1 auto and display: flex so 1) that it grows to the necessary height and 2) so that it's children will also grow to the height of #main.
Set flex: 0 1 300px on #menu (and remove floats/position: absolute) and set #content to be flex: 1 1 auto.
EDIT
Forgot to remove position: absolute (and associated bottom/left rules) from the footer. I also added a ton of content (and modified the left menu to not shrink flex: 0 0 300px instead of flex: 0 1 300px so that a bunch of content doesn't collapse it into nothing-ness
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
display:flex;
flex-flow: column nowrap
}
#header {
padding: 10px;
background: #3095C7;
}
#main {
display: flex;
flex: 1 1 auto;
}
#content {
flex: 1 1 auto;
background: #FFEFC4;
}
#menu {
background: #67b5d1;
flex: 0 0 300px;
}
#footer {
text-align: center;
padding: 30px 0;
width: 100%;
height: 50px;
background: #3095C7;
}
<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="menu">
menu here
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu tristique ex, at rhoncus sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec non ipsum ut nulla volutpat gravida. Donec euismod nibh venenatis fermentum dignissim. Nulla sagittis tristique felis vitae fermentum. Phasellus at viverra sem. In scelerisque mi ac dolor convallis, vitae convallis felis condimentum. Donec porta leo nec semper luctus. In dignissim bibendum viverra. Maecenas molestie, dui eget finibus hendrerit, arcu turpis dapibus arcu, laoreet aliquam lectus justo a lorem. In et enim ac elit tincidunt imperdiet. Phasellus eget erat sed nulla placerat venenatis et in ligula. Mauris volutpat feugiat diam sit amet bibendum. Donec vulputate tristique augue vel pharetra. Mauris orci quam, pharetra lacinia commodo eu, tristique at est.
Morbi metus sapien, venenatis a pulvinar eget, accumsan et nisi. Phasellus vitae blandit augue. Proin quis mollis orci. Ut consequat tempor nulla id dignissim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce in euismod nibh, pharetra laoreet eros. Donec feugiat neque est, ac pharetra quam sollicitudin a.
Donec hendrerit ac magna at tincidunt. Pellentesque eget eros vel mauris porttitor aliquam ac vel tortor. Vestibulum vitae porttitor enim, eu scelerisque quam. Suspendisse tincidunt nisi non eros condimentum, quis faucibus arcu pellentesque. Morbi aliquet, est at pretium molestie, est arcu volutpat lectus, et condimentum leo risus sed velit. Maecenas at fermentum magna. Duis sit amet pretium ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum diam est, facilisis eu tellus vel, sagittis pretium metus. Aenean fermentum sem eu finibus dignissim. Fusce lacinia purus at libero ornare ultricies. Etiam pellentesque erat nisi, a ullamcorper arcu varius eu. Quisque lacinia bibendum ipsum vitae bibendum.
Maecenas non consequat augue, id euismod magna. Vestibulum ut maximus eros, ut efficitur neque. Aenean feugiat nunc et viverra pulvinar. Praesent vitae lobortis mi. Duis eu lorem a velit consequat fringilla at eu lacus. Ut mi mauris, cursus et lectus non, auctor iaculis eros. Sed sit amet efficitur arcu. Maecenas in enim quis massa vestibulum imperdiet ac quis dui. Curabitur malesuada, neque eu scelerisque sagittis, erat nisl condimentum sapien, vitae volutpat felis nisi ac lectus. Fusce iaculis mollis enim, vitae consectetur metus egestas sed. Proin lacus lorem, finibus ut tincidunt quis, tincidunt a urna. Donec fringilla risus augue, et bibendum diam cursus vitae. Aenean mattis sapien eget volutpat ornare.
</div>
</div>
<div id="footer">footer content</div>
</div>

Answer 2

I think your code is a bit messed.
If I understood correctly your question you have a header and footer with fixed height and you want the content of the web to fill the height of the (vertical) window.
When using height:100% remember all parents need to have same height 100% but then you may have a problem as height 100% plus the fixed height of footer and header will create a scroll bar.
you can use css calc to substract px's to 100% height. I calculate the pixels you need to subtract in your example and the height for your content shoudl be:
height:calc(100% - 110px);
AND the height of your main:
height:calc(100% - 20px);
The rest is your css's with many changes to achieve what I think you were looking for. corrent me if I am wrong: FIDDLE
(you can see I also used calc to set the width to your content since your menu also had fixed width)
Note: carefull with the use of this technique if you NOT using border-boxfor your containers as all the paddings you are using add width (or height) to your elements. I recomend you to get use to add
* {
box-sizing: border-box;
}
in your css sheets. Once you get use to your live will be easier (just my humble opinion, some may disagree)

Answer 3

Assuming your footer has a fixed height, you can automatically set the height of #menu and #content using position: absolute:
position: absolute;
top: 0;
bottom: 110px; /* #footer height */
Most of the time, absolutely positioned elements have auto values of height and width computed to fit the contents of the element. However, non-replaced absolutely positioned elements can be made to fill the available space by specifying (as other than auto) both top and bottom and leaving height unspecified (that is, auto). Likewise for left, right, and width.
See: https://developer.mozilla.org/en-US/docs/Web/CSS/position#Notes
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
position: relative;
}
#header {
padding: 10px;
background: #3095C7;
}
#main {
position: absolute;
top: 20px;
bottom: 0;
width: 100%;
}
#content {
position: absolute;
left: 310px;
right: 0;
top: 0;
bottom: 50px;
background: #FFEFC4;
}
#menu {
background: #67b5d1;
top: 0;
bottom: 50px;
width: 300px;
position: absolute;
}
#footer {
text-align: center;
padding: 30px 0;
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
background: #3095C7;
}
<div id="wrapper">
<div id="header"></div>
<div id="main">
<div id="menu">
menu here
</div>
<div id="content">
content here
</div>
</div>
<div id="footer">footer content</div>
</div>

Answer 4

Add a specified height into your CSS, e.g. height: 100px and then set overflow to hidden.
So basically, just add:
height: 100px;
overflow: hidden;
to your menu and content.