这是整个代码：
<!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会使其有效？ 答案 0 :(得分：37)
height属性，百分比值＆amp; DOCTYPE 您的问题的第一部分询问如何对您的div应用100％的高度已被其他人多次回答。基本上，在根元素上声明一个高度：
html { height: 100%; }
可在此处找到完整的解释：
您问题的第二部分受到的关注较少。我会尝试回答这个问题。
为什么删除
doctype使[绿色背景]有效？
当您删除DOCTYPE（document type declaration）时，浏览器会从标准模式切换到怪癖模式。
在quirks mode中，也称为compatibility mode，浏览器会模拟旧浏览器，以便解析旧网页 - 在Web标准出现之前编写的网页。怪癖模式的浏览器假装为IE4，IE5 and Navigator 4，因此它可以呈现作者想要的旧代码。
以下是Wikipedia定义怪癖模式的方式：
在计算中，怪癖模式是指某些网站使用的技术 浏览器是为了保持与Web的向后兼容性 为旧浏览器设计的页面，而不是严格遵守 标准模式下的W3C和IETF标准。
此处MDN采取：
在网络的旧时代，网页通常写成两页 版本：一个用于Netscape Navigator，另一个用于Microsoft Internet 资源管理器。当Web标准在W3C制作时，浏览器就不能 刚开始使用它们，因为这样做会破坏大多数现有网站 网络。因此，浏览器引入了两种处理新模式的方式 符合标准的站点与旧的旧站点不同。
现在，以下是代码中height: 100%以怪异模式运行而不是标准模式的具体原因：
在standards mode中，如果父元素具有height: auto（未定义高度），则子元素的百分比高度也将被视为height: auto（as per the spec ）。
这就是为什么第一个问题的答案是html { height: 100%; }。
要height: 100%使用div，您必须在父元素（more details）上设置height。
但是，在怪癖模式下，如果父元素具有height: auto，则子元素的百分比高度将相对于视口 进行测量。
以下是三个涉及此行为的参考资料：
以下是开发人员需要简单了解的内容：
怪癖模式下的浏览器将以某种方式呈现网页 不可预测，不可靠，往往不受欢迎。所以总是包含一个 DOCTYPE ，用于在standards mode中呈现文档。
选择正确的DOCTYPE曾经是模棱两可的 与many DOCTYPE versions to choose from混淆的过程。但 今天这个过程就像以往一样简单。只需使用：
<!DOCTYPE html>
答案 1 :(得分：8)
你的意思是垂直？ div是块级元素，因此默认情况下它们会水平填充父级。
为了使其正常工作，您还需要为HTML标记提供100％的高度。
html, body { height:100%; }
请参阅此处查看工作样本：
http://jsfiddle.net/uhg0y9tm/1/
正如其他一些人所说，一旦删除第一行（HTML5 doctype），浏览器将以不同的方式呈现页面，在这种情况下，不需要提供HTML标记显性高度为100％。
答案 2 :(得分：4)
使用HTML5 doctype，您还需要在html元素上设置高度：
html {
height:100%;
}
答案 3 :(得分：4)
您必须将<html>和<body>标记的宽度和高度设置为100％，因为当您将<div>的宽度和高度指定为100％时，它表示您正在为其分配其父元素的完整宽度和高度，在这种情况下，<div>的父元素为<body>，而<body>的父元素为{{1} }。
为什么删除
<html>代码后会有效？
因为当您删除<!DOCTYPE html>标记时，浏览器会以不同的方式呈现页面，显示其他结果。
答案 4 :(得分：1)
你需要让你的html和body标签高度为100％来填充页面。
的CSS：
html, body{
height: 100%;
}