这是完整的代码：
<!DOCTYPE HTML>
<html>
<body style="height: 100%; padding: 0; margin: 0;">
<div style="background-color: green; height: 100%; width: 100%"></div>
</body>
</html>
什么也没出现。但是，如果我删除第一行（doctype），所有页面都会按预期变为绿色。
我有两个问题：
div 填充页面而不删除该标记？doctype 就可以正常工作？ 
P粉0434322102023-10-27 00:47:01
你是说垂直吗？ div 是块级元素，因此默认情况下它们会水平填充父元素。
为了使其正常工作，您还需要将 HTML 标记的高度设置为 100%。
html, body { height:100%; }
请参阅此处的工作示例：
http://jsfiddle.net/uhg0y9tm/1/
正如这里其他一些人所说，一旦删除第一行（HTML5 文档类型），浏览器将以不同的方式呈现页面，在这种情况下，没有必要为 HTML 标签指定明确的高度100%。
P粉9044059412023-10-27 00:30:23
height 属性、百分比值和 DOCTYPE您的问题的第一部分询问如何将 100% 高度应用到您的 div ，其他人已多次回答。本质上，声明根元素的高度：
html { height: 100%; }
完整的解释可以在这里找到：
您问题的第二部分受到的关注要少得多。我会尝试回答这个问题。
当您删除 DOCTYPE（文档类型声明）时，浏览器将从标准切换模式到怪异模式。
在怪异模式下，也称为兼容模式，浏览器模拟旧浏览器，以便它可以解析旧网页 - 在网络标准出现之前编写的页面。处于怪异模式的浏览器会伪装成 IE4，IE5 和 Navigator 4，以便它可以按照作者的意图呈现旧代码。
以下是Wikipedia如何定义怪癖模式：
以下是 MDN 的观点：
现在，以下是代码中的 height: 100% 在怪异模式下工作但在标准模式下不起作用的具体原因：< /p>
在标准模式中，如果父元素具有高度: auto （没有定义高度），那么子元素的百分比高度也将被视为 height: auto (按照规范）。
这就是为什么你的第一个问题的答案是 html { height: 100%; }.
要使 height: 100% 在 div 中工作，您必须在父元素上设置 height (更多详细信息）。
但是，在怪异模式下，如果父元素具有 height: auto，则子元素的百分比高度将相对于视口进行测量。
以下是涵盖此行为的三个参考文献：
简而言之，以下是开发人员需要了解的内容：