Home >Web Front-end >CSS Tutorial >How Can I Make a Div 100% Height Without Removing the DOCTYPE?
How Can I Make a Div 100% Height Without Removing the DOCTYPE?
- DDDOriginal
- 2024-12-29 15:15:15963browse
CSS Height Property, Percentage Values, and DOCTYPE
How to make a div fill the page with a 100% height without removing the DOCTYPE?
Solution:
Declare a height on the root element:
html { height: 100%; }
Why does removing the DOCTYPE make it work?
In standards mode, a percentage height for a child element with no defined height is treated as auto. In quirks mode, however, the percentage height is measured relative to the viewport. Hence, removing the DOCTYPE forces the browser into quirks mode, allowing the div to fill the page with a height of 100%.
However, quirks mode is unpredictable and unreliable. Always include a DOCTYPE to render the document in standards mode using:
<!DOCTYPE html>
The above is the detailed content of How Can I Make a Div 100% Height Without Removing the DOCTYPE?. For more information, please follow other related articles on the PHP Chinese website!