CSS - Height of 100% minus #px - Header and Footer

Question

The webpage in question looks like this:

// The Header //
/*            */
/*  CONTENT   */
/*            */
// The footer //

Both the head

Answer 1

This example seems to show the most robust way to do this. Actually, it is a bit buggy in IE, because resizing goes wrong sometimes. Namely, when doing a resize from out of the lower right corner and just do a vertical resize by hand (quite hard to do sometimes), the page will not refresh in IE. I had the same problem with this and just fixed it with JS after all, because of other events on my web page.

http://www.xs4all.nl/~peterned/examples/csslayout1.html

Answer 2

Place a fixed position on the header and the footer and set them to stick to the top of bottom of the window, respectively. Then place a top and bottom padding on the content area of 20px.

#header{position:fixed;top:0}
#footer{position:fixed;bottom:0}
#content{padding:20px 0}

Answer 3

If your browser supports CSS3, try using the CSS element Calc()

height: calc(100% - 65px);

you might also want to adding browser compatibility options:

height: -o-calc(100% - 65px); /* opera */
height: -webkit-calc(100% - 65px); /* google, safari */
height: -moz-calc(100% - 65px); /* firefox */

Answer 4

#header /* hypothetical name */
{
    height:100%;
}

#header p /* or any other tag */
{
    margin:20px 0 20px 0;
}

Just make sure to not place margin and height in the same tag. You will experience some crazy results.

Answer 5

Marnix's answer involves using the top and bottom padding of the content element; mine involves using the top and bottom border.

I stumbled onto this solution on my own while trying to figure out how to do something similar without resorting to tables: make the central element's height 100%, but then set the box-sizing model to "border-box" (so that the height includes not only the content within the box but also the borders around the box), make the top and bottom borders really thick (like, say, 20px), then use fixed positioning to overlay the header and footer over the crazy-thick top and bottom borders of the central element.

Here is my sample CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#content {
    height: 100%;

    -moz-box-sizing: border-box;
    box-sizing: border-box;
      /* Ensure that the height of the element includes the
         box border, not just the content */

    border: 0;
    border-top: 20px solid white;
    border-bottom: 20px solid white;
      /* Leave some space for the header and footer to
         overlay. */
}
#header,
#footer {
    position: fixed;
    left: 0;
    right: 0;
    height: 20px;
    background-color: #eee;
      /* Specify a background color so the content text doesn't
         bleed through the footer! */
}
#header {
    top: 0;
}
#footer {
    bottom: 0;
}

This works in Google Chrome 24 for Mac. I haven't tried it in other browsers, though.

Hopefully this will help somebody else who is still facing the temptation to just use a table and get the page layout done already. :-)