How to Set a Div Height to 100% of Body Minus Fixed-Height Header and Footer?

Setting a Div Height to 100% of Body Minus Fixed-Height Header and Footer

If you're looking to set a content div to take up 100% of the body height, excluding fixed-height header and footer elements, employing CSS is the ideal solution. Here's a bulletproof technique that works across browsers:

<code class="css">html,
body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

#wrapper {
  padding: 50px 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#content {
  min-height: 100%;
  background-color: green;
}

header {
  margin-top: -50px;
  height: 50px;
  background-color: red;
}

footer {
  margin-bottom: -50px;
  height: 50px;
  background-color: red;
}

p {
  margin: 0;
  padding: 0 0 1em 0;
}</code>

Let's break down the key elements of this approach:

• Absolute Positioning: The #wrapper div is positioned absolutely, allowing it to stretch to the full height of the viewport.
• Negative Margins: Header and footer elements use negative margins to overlap the #wrapper. This creates the illusion of them being fixed while giving the #content div the necessary space.
• Minimum Height: Both the #wrapper and #content divs have a minimum height set to 100%. This ensures they fill the remaining space not taken up by the header and footer.

This technique provides a cross-browser solution that reliably sets the content div to 100% of the body height, minus fixed-height header and footer elements.

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