Div inside of div, 100% height makes overflow off screen

Question

I've spent 2 days trying to sort this out and I can't. I'd appreciate any help.

I have a container set to fill 100% vertically, which it does just fine. In the container I have another div for my header. Underneath the header, I want another div to also fill vertically 100% (from the bottom of the header to the bottom of the screen) regardless of how little content there is. The problem is, when I set the height for this div at 100%, it overflows past the bottom of the browser window, even if there is no other content in it. Just a long blank space. The overflow is the same size as my header.

If I remove my header, it works fine. And if I tell this div to not be 100%, then it will only go as deep as the content forces it, which won't be enough in some cases. I tried using overflow: hidden, but then that hides the shadow effect I have on the div.

You can view the page here

And the code in question is here:

#container {
    height: 100%;
    position: relative;
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: -80px;
}

#bodybox {
    height: 100%;
    width: 960px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    margin-bottom: -80px;
    background-color: #FFF;
    -webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.75);
}

You'll notice my footer is hovering over the bottom. That's because of the overflow. I'm using this sticky footer solution in case that's important.

I'm a bit of a novice at CSS and I really want to avoid excessive Photoshop usage or tables, but I can't seem to get any tip or suggestion I've read to fix this. Please help. Thanx.

The body box container is doing exactly what it is supposed to. It is taking on a height equal to 100% of its parent container height. The reason it is overflowing is because the header is pushing down the body box div. Will post a solution once I find one. — Kenny Thompson, Nov 23 '13 at 20:32
Here is another question relating to yours http://stackoverflow.com/questions/3411317/css-height-fill-out-rest-of-div — Kenny Thompson, Nov 23 '13 at 20:34

score 5 · Answer 1 · answered Nov 23 '13 at 20:37

try

#bodybox{
height: calc(100% - 142px);
...

where 142px is the height of the header. Calc calculates the height according to the arithmetic in the parentheses. Note the equation will not more without the spaces before and after the operator. The same equation can be used to counter the effect of margins too.

score 3 · Answer 2 · answered Nov 24 '13 at 10:36

If you set an element to have a relative height/width (with percentages), the height/width will be relative to it's direct parent (if some exceptions do not apply, I will not explain them here). But that doesn't take positioning into account. So your content div has exactly the height you asked it to be, but because it is pushed down by the header it appears to be taller.

You could use calc to calculate the height you want, or use the oldschool push back method.

You start with building the container, header and content div:

<div class="conatiner">
    <div class="header"></div>
    <div class="content"><h1>My Content</h1></div>
</div>

And apply some styles:

.container { width: 300px; height: 100%; } /* height can be anything */
.header { width: 100%; height: 100px; } /* header SHOULD have a fixed height */
.content { width: 100%; height: 100%; }

And to push back you add to the styles of the .content div: margin-top: -100px;, where the 100px should be the same height as the header. With the minus in front you tell the browser to pull it back instead of push it down.

Now you have two more problems to solve. The first one is that the content div covers the header div. You can fix that with applying z-index, although that requires you to add position too (as z-index only applies to positioned elements). So add those two rules to both header and content:

z-index: 1/0; /* header has z-index: 0, content has z-index: 1 */
position: relative; /* to 'activate' z-index 'behavior' */

Now we're almost there, but as you might see the content also disappears behind the header. To fix this, add a padding to the content div:

.content { padding-top: 100px; } /* again the 100px should be the same as the header height */

And now don't despair if you see the content div pushed down again. That is because the padding adds up to the height. Luckily my great friend box-sizing helps us out!

.content { box-sizing: border-box; -moz-box-sizing: border-box; }

And here we are (fiddle)!

Note: there are some other strategies, like, absolute positioning of the content div and/or header, using the calc functions, and others. Choose what suits you best.

score 1 · Answer 3 · answered Nov 23 '13 at 20:35

1

Quick fix:

#header_bkgd {
overflow: hidden;
}

answered Nov 23 '13 at 20:35

Alex

4,674
5
38
59

score 0 · Answer 4 · answered Nov 23 '13 at 20:29

0

I'm guessing its to do with the fact that they both have a margin-bottom of 80px? one is taking off the other forcing it to overflow.

answered Nov 23 '13 at 20:29

Andi Wilkinson

662
1
6
14

score 0 · Answer 5 · answered Nov 23 '13 at 20:32

0

Do this:

CSS:

#bodybox{
 margin-bottom: -80px; //Remove
 // rest of the css
}

#container {
    margin: 0
}

answered Nov 23 '13 at 20:32

Ani

4,473
4
26
31

Div inside of div, 100% height makes overflow off screen

5 Answers5