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?

DDD
Release: 2024-12-29 15:15:15
Original
974 people have browsed it

How Can I Make a Div 100% Height Without Removing the DOCTYPE?

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%; }
Copy after login

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>
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template