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

The webpage in question looks like this:

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

Both the header and the footer have fixed开发者_开发百科 heights. Lets say for example that both have a height of 20px. I need to set the content's height to 100% minus 40px (header + footer heights). I know I can do this easily with JavaScript, but it would be cool to learn how to do it with plain CSS, if it's possible.

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 */

#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.

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}

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. :-)

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

UPDATE:

Taken from the page for future reference:

/**
 * 100% height layout with header and footer
 * ----------------------------------------------
 * Feel free to copy/use/change/improve
 */

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;
    
    font-family:arial,sans-serif;
    font-size:small;
    color:#666;
}

h1 { 
    font:1.5em georgia,serif; 
    margin:0.5em 0;
}

h2 {
    font:1.25em georgia,serif; 
    margin:0 0 0.5em;
}
    h1, h2, a {
        color:orange;
    }

p { 
    line-height:1.5; 
    margin:0 0 1em;
}

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:750px;
    background:#f0f0f0;
    
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

div#header {
    padding:1em;
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom:6px double gray;
}
    div#header p {
        font-style:italic;
        font-size:1.1em;
        margin:0;
    }

div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}
    div#content p {
        text-align:justify;
        padding:0 1em;
    }

div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
}
    div#footer p {
        padding:1em;
        margin:0;
    }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>CSS Layout - 100% height</title>
    <link rel="stylesheet" type="text/css" href="css/layout1.css" />
</head>
<body>

    <div id="container">

        <div id="header">
            <h1>CSS layout: 100% height with header and footer</h1> 
            <p>Sometimes things that used to be really simple with tables can still appear pretty hard with CSS. This layout for instance would consist of 3 cells; two with a fixed height, and a third one in the center filling up the remaining space. Using CSS, however, you have to take a different approach.</p>
        </div>

        <div id="content">
            <h2>Min-height</h2>
            <p>
                The #container element of this page has a min-height of 100%. That way, if the content requires more height than the viewport provides, the height of #content forces #container to become longer as well. Possible columns in #content can then be visualised with a background image on #container; divs are not table cells, and you don't need (or want) the fysical elements to create such a visual effect. If you're not yet convinced; think wobbly lines and gradients instead of straight lines and simple color schemes.
            </p>
            <h2>Relative positioning</h2>
            <p>
                Because #container has a relative position, #footer will always remain at its bottom; since the min-height mentioned above does not prevent #container from scaling, this will work even if (or rather especially when) #content forces #container to become longer.
            </p>
            <h2>Padding-bottom</h2>
            <p>
                Since it is no longer in the normal flow, padding-bottom of #content now provides the space for the absolute #footer. This padding is included in the scrolled height by default, so that the footer will never overlap the above content.
            </p>
            <p>
                Scale the text size a bit or resize your browser window to test this layout. The <a href="css/layout1.css">CSS file is over here</a>.
            </p>
            <p>
                <a href="../css.html">Back to CSS Examples</a>
            </p>
        </div>

        <div id="footer">
            <p>
                This footer is absolutely positioned to bottom:0; of  #container. The padding-bottom of #content keeps me from overlapping it when the page is longer than the viewport.
            </p>
        </div>
    </div>


    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
    <script type="text/javascript">
        _uacct = "UA-472607-1"; urchinTracker();
    </script>

</body>