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.

Answer 1

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.