Css vertical div fill up but not overflow?

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!

should be possible. What have you tried? Can we see some css? a fiddle perhaps? — Pevara, Apr 25 '13 at 19:15
Please use http://jsbin.com to share an example of your code and write a follow-up comment for us to notice the update. — Andrey Mikhaylov - lolmaus, Apr 25 '13 at 19:21

score 0 · Answer 1 · answered Apr 25 '13 at 19:19

0

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.

answered Apr 25 '13 at 19:19

Joseph Myers

6,434
27
36

since the main div height is 80%, and the header div, if known, will be of a constant height, how can I know what to set the max-height of the content to without calculating it in js? – Derek Apr 25 '13 at 19:21

score 0 · Answer 2 · answered Apr 25 '13 at 19:26

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>

score 0 · Accepted Answer · answered Apr 25 '13 at 19:34

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.

score 0 · Answer 4 · answered Apr 25 '13 at 19:45

0

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.

answered Apr 25 '13 at 19:45

Chris Bier

14,183
17
67
103

Css vertical div fill up but not overflow?

4 Answers4