Home/ Questions/Q 6236895
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T10:55:41+00:00

I’m restructuring a page for a client at -removed by author- (it’s in Hebrew,

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0