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

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

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

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

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

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

html { height: 100%; }

为什么删除 DOCTYPE 声明可以使其工作？

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

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

结论

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

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