CSS - height 100% mins # px - header and footer

Question

The corresponding web page is as follows:

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

Both the header and the footer have a fixed height. Say, for example, that both have a height of 20 pixels. I need to set the content height to 100% minus 40 pixels (header height + footer). I know that I can easily do this using JavaScript, but it would be great to know how to do this using simple CSS, if possible.

Answer 1

 #header /* hypothetical name */ { height:100%; } #header p /* or any other tag */ { margin:20px 0 20px 0; } 

Just remember to specify margin and height in the same tag. You will experience some crazy results.

Answer 2

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

 height: calc(100% - 65px); 

You can also add browser compatibility options:

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

Answer 3

Place a fixed position in the header and footer and set them to the top of the bottom of the window, respectively. Then place the upper and lower uppercase parts in the 20px content area.

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

Answer 4

Marnix's answer involves using the top and bottom fill of a content item; mine involves using the upper and lower bounds.

I stumbled upon this solution myself, trying to figure out how to do something like this without resorting to tables: make the center height of the element 100%, but then set the window size model to “border-box” (so that the height includes not only the content in field, but also the borders around the window), make the upper and lower borders thick (e.g. 20px), then use fixed positioning to overlay the headers and footers on the crazy, thick headers and footers of the center element.

Here is my CSS example:

 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 on Google Chrome 24 for Mac. However, I have not tried this in other browsers.

Hope this helps someone else who is still tempted to just use the table and make the page layout already completed. :-)

Answer 5

This example shows the most reliable way to do this. Actually, this is a bit incorrect in IE, because resizing sometimes happens wrong. Namely, when you do a resize from the lower right corner and just do a vertical resize manually (it’s quite difficult to do sometimes), the page will not refresh in IE. I had the same problem with this, and I just fixed it using JS, due to other events on my web page.

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