<h3>为什么删除 DOCTYPE 声明可以使其工作？</h3>
当存在 DOCTYPE 时，浏览器会按照标准呈现页面模式。在标准模式下，如果父元素没有明确的高度，则子元素的百分比高度将被视为 height: auto。这就是为什么 div 在标准模式下无法填充页面的原因。
但是，当 DOCTYPE 不存在时，浏览器会切换到怪异模式。在怪异模式下，子元素的百分比高度是相对于视口测量的。这意味着上例中的 div 将以怪异模式填充整个页面，因为其高度设置为视口高度的 100%。
结论" >如何在不删除 DOCTYPE 声明的情况下让 div 填充页面？
如何在不删除 DOCTYPE 声明的情况下让 div 填充页面？ DOCTYPE，只需将根元素（html）的高度设置为100%:
html { height: 100%; }<h3>为什么删除 DOCTYPE 声明可以使其工作？</h3>
当存在 DOCTYPE 时，浏览器会按照标准呈现页面模式。在标准模式下，如果父元素没有明确的高度，则子元素的百分比高度将被视为 height: auto。这就是为什么 div 在标准模式下无法填充页面的原因。
但是，当 DOCTYPE 不存在时，浏览器会切换到怪异模式。在怪异模式下，子元素的百分比高度是相对于视口测量的。这意味着上例中的 div 将以怪异模式填充整个页面，因为其高度设置为视口高度的 100%。
结论
为什么 100% 高度的 div 仅在删除 DOCTYPE 后才填充页面？
为什么删除 DOCTYPE 后高度 100% 会起作用？
此代码片段尝试用绿色填充整个页面div:
<!DOCTYPE HTML> <html> <body>
但是，它并没有按预期工作。 div 仍然不可见。如果我们删除 DOCTYPE 声明 ()，div 会突然扩展以填充整个页面。这就提出了两个问题：
如何在不删除 DOCTYPE 声明的情况下让 div 填充页面？
如何在不删除 DOCTYPE 声明的情况下让 div 填充页面？ DOCTYPE，只需将根元素（html）的高度设置为100%:
html { height: 100%; }为什么删除 DOCTYPE 声明可以使其工作？
当存在 DOCTYPE 时，浏览器会按照标准呈现页面模式。在标准模式下，如果父元素没有明确的高度，则子元素的百分比高度将被视为 height: auto。这就是为什么 div 在标准模式下无法填充页面的原因。
但是，当 DOCTYPE 不存在时，浏览器会切换到怪异模式。在怪异模式下，子元素的百分比高度是相对于视口测量的。这意味着上例中的 div 将以怪异模式填充整个页面，因为其高度设置为视口高度的 100%。
结论
始终包含 DOCTYPE 声明以确保页面以标准模式呈现非常重要。 Quirks 模式是不可靠且不可预测的，应该不惜一切代价避免它。首选的 DOCTYPE 声明很简单：
<!DOCTYPE html>
以上是为什么 100% 高度的 div 仅在删除 DOCTYPE 后才填充页面？的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
如何使用HTML，CSS和JavaScript创建动画倒计时计时器
Apr 11, 2025 am 11:29 AM
您是否曾经在项目上需要一个倒计时计时器？对于这样的东西，可以自然访问插件，但实际上更多
当您看上去时，CSS梯度变得更好
Apr 11, 2025 am 09:16 AM
我关注的一件事是Lea Verou＆＃039; s conic-Gradient（）Polyfill的功能列表是最后一项：
