How to Set a Div to 100% Body Height, Excluding Fixed-Height Header and Footer?

Setting a Div to 100% Body Height, Excluding Fixed-Height Header and Footer

CSS enables elegant control over web page layout. One common requirement is to display content at 100% of the body height, while excluding the space occupied by a fixed-height header and footer. Achieving this effect requires meticulous CSS implementation to ensure cross-browser compatibility.

One bulletproof solution is to set html and body to min-height: 100%;, ensuring the page expands as much as possible. Then, a wrapper div should be created with absolute positioning and padding to accommodate the header and footer heights. Within this wrapper, the #content div can be set to min-height: 100%;, causing it to fill the remaining space.

To ensure the header and footer remain fixed, margin-top: -50px; and margin-bottom: -50px; are applied, effectively negating the padding added to the wrapper. These negative margin values push the header and footer outside the wrapper div, giving the illusion that they are suspended above and below the content.

This technique has been tested and proven to work across modern browsers and even Internet Explorer 8 with Modernizr (or by simply replacing header and footer elements with divs if Modernizr is unavailable). A code snippet with a live example is available for further clarification.

The above is the detailed content of How to Set a Div to 100% Body Height, Excluding Fixed-Height Header and Footer?. For more information, please follow other related articles on the PHP Chinese website!