How to Make a Content Div Fill 100% of Body Height Excluding Fixed Header and Footer?

How to Set a Content Div to Occupy 100% of Body Height Excluding Fixed-Height Header and Footer

CSS allows you to define precise and versatile layouts for web pages. One common challenge is setting a content area to occupy the full height of the page while excluding the space taken by fixed-height elements like headers and footers. This guide provides a comprehensive solution using pure CSS that is compatible across all modern browsers.

The HTML structure includes a header, a content div, and a footer. In the CSS, we start by ensuring that the html and body elements have a minimum height of 100% and no margins or padding.

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

To position the content area, we introduce a #wrapper div that spans the entire viewport using absolute positioning.

<code class="css">#wrapper {
  padding: 50px 0; /* Adjust to match header and footer heights */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}</code>

Inside the #wrapper, we define the content div (#content) with a minimum height of 100%. This ensures that it fills the entire available space.

<code class="css">#content {
  min-height: 100%;
}</code>

To account for the header and footer heights, we use negative margins to offset them.

<code class="css">header {
  margin-top: -50px; /* Adjust to match header height */
  height: 50px;
}

footer {
  margin-bottom: -50px; /* Adjust to match footer height */
  height: 50px;
}</code>

This approach ensures that the content div occupies the space remaining after accounting for the fixed heights of the header and footer, resulting in a seamless and dynamic layout that adapts to different screen sizes and device orientations.

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