How to Achieve a 100% Body Height Div with Fixed Header and Footer?

Achieving a 100% Body Height Div with Fixed Header and Footer

Initial Situation:

In a web page layout, you want to create a content div that fills the entire body height, excluding the fixed-height header and footer.

Solution:

1. Establish a Minimum Height Baseline:

   Declare html and body elements with min-height: 100%;. This ensures they extend to the full window height.

2. Create a Wrapper for the Content:

   Create a #wrapper div that contains everything, excluding the header and footer. Position it absolutely and constrain it to the full window dimensions.

3. Define the Content Area:

   Inside the #wrapper, create a #content div for the main content. Set its min-height to 100% to fill the remaining space.

4. Position the Header and Footer:

   Add header and footer elements with fixed heights and appropriate colors. Use the margin-top and margin-bottom properties with negative values to position them above and below the #wrapper.

Implementation:

<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>

<code class="html"><div id="wrapper">
  <header>dfs</header>
  <div id="content">
  </div>
  <footer>sdf</footer>
</div></code>

This code ensures that the #content div fills the entire body height while accommodating the fixed-height header and footer. It works in modern browsers and IE8 with the Modernizr script (or can be modified to use divs instead of header and footer elements).

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