HTML & Body Height: 100% vs. Min-Height: 100% – Which Should I Use?

Height vs. Min-Height for HTML and Body Elements: Understanding the Differences

In web design, achieving a layout that fills the browser window can be crucial. Developers often set the height of the html and body elements to 100%, expecting it to extend to the full window size. However, in certain scenarios, this approach fails. This article aims to shed light on this issue and provide the recommended solution.

Why Height: 100% or Min-Height: 100% Can Fail

Setting both html and body to height: 100% prevents the body element from expanding beyond the viewport height. This leaves a noticeable gap at the bottom of the page, often an undesired outcome.

On the other hand, min-height: 100% on both elements does not work because min-height with a percentage does not apply to the body element unless html has an explicit height defined.

The Recommended Solution: Height: 100% on HTML, Min-Height: 100% on Body

To address these limitations, it is recommended to set html to height: 100% and body to min-height: 100%. This allows:

• html to expand to the height of the viewport.
• body to expand to accommodate page content, while maintaining a minimum height of 100%.

Background Images: A Special Case

When applying background images to html and body that fill the browser window, neither height: 100% nor min-height: 100% will work effectively. Instead, it is recommended to use the following approach:

html {
  height: 100%;
}

body {
  min-height: 100%;
}

This allows the background image to cover the entire browser window without any gaps or overflows.

The above is the detailed content of HTML & Body Height: 100% vs. Min-Height: 100% – Which Should I Use?. For more information, please follow other related articles on the PHP Chinese website!