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

Susan Sarandon
Release: 2024-10-30 19:02:02
Original
160 people have browsed it

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>
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!