How to Make a Dynamic Content Div Fill the Remaining Body Height After Header and Footer?

Ensure a Dynamic Content Div Fills Remaining Body Height After Header and Footer

Achieving a content div that spans the remaining body height after a fixed-height header and footer is a common CSS challenge. The following comprehensive solution addresses this issue across modern browsers and Internet Explorer 8.

In this example, wrap the content within a "#wrapper" div, absolutely positioned and spanning the entire viewport. Set the "min-height" property to 100% to ensure it takes up at least that height, and add padding to account for the header and footer.

Nest the content within a "#content" div with a "min-height" of 100% to occupy the remaining height. Give the header and footer fixed heights, and adjust their margins negatively to compensate for the padding in the "#wrapper" div.

<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;
}</code>

This solution dynamically adjusts the content div's height based on the viewport size, ensuring it seamlessly fills the remaining body space while accommodating the header and footer.

The above is the detailed content of How to Make a Dynamic Content Div Fill the Remaining Body Height After Header and Footer?. For more information, please follow other related articles on the PHP Chinese website!