HTML & Body Height: `height: 100%` vs. `min-height: 100%` – Which Should You Use?

Height vs. Min-height for HTML and Body Elements

When designing layouts, many developers set the height of the html and body elements to 100%. However, this approach can sometimes encounter issues. This article explores the differences between height: 100% and min-height: 100% for these elements and provides recommendations for their usage.

The Background and HTML and Body Elements

Both html and body elements lack inherent height. By default, they are set to height: auto. When height: 100% is applied to these elements, the height is determined from the viewport, allowing them to fill the entire browser window.

Height: 100% vs. Min-height: 100%

• height: 100%: This setting fixes the height of an element to 100% of its parent container. Applying it to both html and body ensures that they fill the entire viewport, but this approach can prevent body from expanding to accommodate content that exceeds the viewport height, potentially leaving a noticeable gap.
• min-height: 100%: This setting sets a minimum height for an element. Applying it to both html and body allows body to expand as needed but does not guarantee that they will fill the viewport if the content is insufficient.

Recommendation: Use height: 100% on html and min-height: 100% on body

For background images that span the entire browser window, the recommended approach is to set height: 100% on html and min-height: 100% on body. This ensures that html fills the entire viewport, providing a background canvas, while body expands vertically as needed, accommodating the content.

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