Css vertical div fill up but not overflow? - html

Question

<div id="main" style="overflow:hidden;height:80%;>
<div id="header">
</div>
<div id="content" style="overflow:hidden;">
</div>
</div>
I have two divs in the main div, and I want the content div to fill up the remainder of the main div, but if stuff fills up the content div past its filled up height, I don't want the content div to grow any taller.
I've seen some other stackoverflow questions like this, but none of the answers have worked for me. Tried: Make DIV fill remainder of page vertically?, Get CSS Div to fill available height, and How to make a DIV fill the remaining vertical space of the browser window?
I think the main difference is that I require the content div to fill up, but ALSO not overflow. Is this possible with only css?
Update:
I kept trying out different pieces of code and this is what I want: http://jsfiddle.net/zXnnp/. But for some reason I couldn't replicate it on my localhost. And then I found out it was because I was using http://jamesflorentino.github.io/nanoScrollerJS/ And for some reason class="nano" on the content div messed things up. Still investigating on what's wrong.
Update2:
class="nano" has height:100%; so I just overrode it with height:auto; and things are now fine. Thanks for all the help!

Answer 1

You could do something like this:
/* stretch the body to full height */
body, html {
height: 100%;
}
/* stretching the containers */
#header {
height: 50px; /* just a random number i chose, not sure what you wanted here */
}
#content {
height: 100%;
margin-bottom: -50px; /* same as the header height, but negative */
}
You can see the code in action here: http://jsfiddle.net/mRK24/
The magic lies in first stretching you body to viewport height. The #main will then become 80% of the viewport height. Next you give the header some fixed height, and the content you set to a height of 100%, with a negative margin bottom that is the same as the height of the header.
Note that some of your content will be lost, due to the overflow:hidden;. Strange, cause you can not know how much since you don't know the height of your user's viewport. Perhaps you should consider setting the overflow of the content to scroll, cause I can't imagine you would want part of you content to be invisible.

Answer 2

Have you tried using the CSS property max-height? This is from CSS 2 and should not have any compatability issues.
http://www.w3schools.com/cssref/pr_dim_max-height.asp
If you post some editable code then we could play with it and help you find some ways of making it work.

Answer 3

I'm not exactly sure what you're after, but maybe this will get you close:
http://jsfiddle.net/isherwood/TCVvn/1
#main {
height: 80%;
width: 80%;
position: absolute;
}
#header {
height: 50px;
position: relative;
top: 0;
}
#content {
position: absolute;
top: 70px;
right: 5px;
left: 5px;
bottom: 5px;
overflow: auto;
}
<div id="main">
<div id="header">Header</div>
<div id="content">Content</div>
</div>

Answer 4

Keep overflow:hidden on <div id="#main"> and let the content div take as much height as it wants with no overflow restrictions. #main will cut off #content if it gets too tall to fit inside of #main.