How Does HTML's `height: 100%` Work with Percentage Values and the Impact of DOCTYPE?

HTML's Height Property and Percentage Values

In HTML, the height property can be set to a percentage value to specify the height of the element relative to its parent element. However, this only works if the parent element has an explicit height set. By default, elements have an implicit height of "auto", which means that their height is automatically determined based on their content.

The first part of your question, regarding how to make the div fill the page without removing the DOCTYPE, can be answered by modifying the CSS to include a height declaration for the "html" element:

html { height: 100%; }<br>

This solution eliminates the need to remove the DOCTYPE, ensuring that the page is rendered in standards mode without interrupting the height functionality.

Quirks Mode vs. Standards Mode

The second part of your question, concerning the effect of removing the DOCTYPE, delves into the difference between quirks mode and standards mode.

When a DOCTYPE is present, the browser enters standards mode, which adheres strictly to web standards. However, if the DOCTYPE is omitted, the browser switches to quirks mode, which attempts to emulate the behavior of older browsers.

In standards mode, percentages for height are always calculated relative to their parent element's height. In your example, since the body element has no explicit height (it's set to "auto"), the div's height of 100% is effectively calculated as "auto," resulting in no visible content.

In contrast, quirks mode operates with less predictable rules. In this mode, the div's height is calculated relative to the viewport height, allowing the div to fill the entire page as expected.

Conclusion

Setting a height value of 100% for a div works as intended in standards mode only when the parent element has an explicit height defined. By setting the height of the html element to 100%, you can ensure that percentages for height within the page are calculated correctly. If the DOCTYPE is removed, the browser switches to quirks mode, which modifies the calculation of percentages and allows the div to fill the page with a height of 100%, even when its parent's height is not explicitly specified.

The above is the detailed content of How Does HTML's `height: 100%` Work with Percentage Values and the Impact of DOCTYPE?. For more information, please follow other related articles on the PHP Chinese website!