首页 >web前端 >css教程 >为什么 100% 高度的 div 仅在删除 DOCTYPE 后才填充页面？

为什么 100% 高度的 div 仅在删除 DOCTYPE 后才填充页面？

Why does a 100% height div only fill the page when the DOCTYPE is removed?

为什么删除 DOCTYPE 后高度 100% 会起作用？

此代码片段尝试用绿色填充整个页面div:

<!DOCTYPE HTML>
<html>
<body>

但是，它并没有按预期工作。 div 仍然不可见。如果我们删除 DOCTYPE 声明 ()，div 会突然扩展以填充整个页面。这就提出了两个问题：

如何在不删除 DOCTYPE 声明的情况下让 div 填充页面？

如何在不删除 DOCTYPE 声明的情况下让 div 填充页面？ DOCTYPE，只需将根元素（html）的高度设置为100%:

html { height: 100%; }

当存在 DOCTYPE 时，浏览器会按照标准呈现页面模式。在标准模式下，如果父元素没有明确的高度，则子元素的百分比高度将被视为 height: auto。这就是为什么 div 在标准模式下无法填充页面的原因。

但是，当 DOCTYPE 不存在时，浏览器会切换到怪异模式。在怪异模式下，子元素的百分比高度是相对于视口测量的。这意味着上例中的 div 将以怪异模式填充整个页面，因为其高度设置为视口高度的 100%。

始终包含 DOCTYPE 声明以确保页面以标准模式呈现非常重要。 Quirks 模式是不可靠且不可预测的，应该不惜一切代价避免它。首选的 DOCTYPE 声明很简单：

<!DOCTYPE html>

以上是为什么 100% 高度的 div 仅在删除 DOCTYPE 后才填充页面？的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

查看更多