Height or Min-Height: Which is Best for HTML and Body Element Layouts?

Height vs. Min-Height for HTML and Body Elements in Layouts

When setting the layout, developers commonly employ either height: 100% or min-height: 100% for html and body elements. However, these methods often fail in certain scenarios, leaving designers wondering which approach is preferable.

Height: 100%

Using height: 100% on both html and body elements fixes them to the viewport height. This method effectively applies background images that fill the entire browser window. However, it prevents body from expanding with its growing content, resulting in unwanted gaps below the viewport fold.

Min-Height: 100%

Specifying min-height: 100% on both html and body elements ensures that body can expand to the viewport height, allowing for scrolling of content. However, this method only works if html has an explicit height.

Recommended Approach

For background images that fill the browser window, the recommended solution is:

html {
  height: 100%;
}

body {
  min-height: 100%;
}

This approach allows html to determine the viewport height and body to expand as needed, avoiding both gaps and content overflow.

Additional Considerations

Html and body lack inherent height, so explicit height: auto is assigned by default. Background images applied to these elements must be explicitly specified within html because html derives its height from the viewport.

While min-height: 100% without an explicit html height can lead to unexpected behavior, understanding the CSS specifications (section 10 of CSS2.1) provides a thorough explanation of these technicalities.

The above is the detailed content of Height or Min-Height: Which is Best for HTML and Body Element Layouts?. For more information, please follow other related articles on the PHP Chinese website!