CSS - 100% height is more than 100%?

Question

I'm restructuring a page for a client at -removed by author- (it's in Hebrew, but that's irrelevant).
I'm having some CSS problems with the footer (gray background) - I want the gray background to fit according to the content inside that box - so if the list grows the background div's height increases, and if the list shrinks, so does the background. I know this can be achieved with 100% height, and I know the basics of the concept. I understand that the parent containers must be set to 100% height as well, and that way the background will stretch.
But if you look at the footer on the page I linked to, and the 2 containers it's in, it's stretching down much farther than it should (using Web Developer Toolbar you can see each container's height). Also, it's containers seem to be set at different heights, even though they should also be stretching according to the content.
I tried putting height, min-height, clear and positioning settings everywhere - I just can't get it to work right.
I know the whole "CSS 100% height" question is pretty common. Believe me, I've read and I've searched for someone with this same issue - but I found nothing.

Answer 1

Padding, margin and borders are not counted in the height and width, so 100% height or width on an element with 10px padding on each side will actually take up 100% plus 20 pixels. And add even more if you're using margin and borders.

The way around this is to use the CSS box-sizing:border-box; property, which allows you to switch the box model so that borders and padding are taken into account (margin still remains outside the box, so if you're using 100%, don't use margins).

This effectively makes the box model work in the same way as the old Quirks Mode box model.

Find out more about the box-sizing feature here: http://css-tricks.com/box-sizing/

box-sizing has fairly good cross-browser support, but note that it doesn't work in IE7 or below, and requires a vendor prefix for some browsers.

See more about the browser support here: http://caniuse.com/#search=box-sizing

Answer 2

Don't do that to yourself... Just clear it.

float the <ul>'s to the left or right, and add a <div style='clear:both'> right before the end of parent div.

Behatzlacha, ahi.

Answer 3

This is a wild guess, because there's no link. Do the divs have padding? Padding is always added to a div's height, even that height is 100%.