为什么我的div高度100％只在DOCTYPE被删除时才起作用？
这是整个代码：
<!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使它工作？
CSS height属性，百分比值和DOCTYPE
你的问题的第一部分问如何申请100％的高度，你的div已经被其他人回答了几次。 基本上，在根元素上声明一个高度：
html { height: 100%; }
完整的解释可以在这里find：
- 使用CSS
height属性和百分比值 。
你的问题的第二部分收到的关注较less。 我会尽力回答。
为什么删除
doctype使[绿色背景]工作？
当您删除DOCTYPE（ 文档types声明 ）浏览器从标准模式切换到怪癖模式 。
在怪癖模式 （又称兼容模式）中 ，浏览器模拟旧的浏览器，以便parsing旧的网页 – 在networking标准出现之前创作的网页。 怪癖模式下的浏览器假装为IE4 ， IE5和Navigator 4，因此它可以按照作者的意图渲染旧代码。
以下是Wikipedia如何定义怪癖模式：
在计算中，怪癖模式是指为了维持与旧版浏览器devise的网页的向后兼容性，而不是在标准模式下严格遵守W3C和IETF标准，这是一些网页浏览器使用的技术。
这里是MDN的采取：
在networking的旧时代，网页通常分为两个版本：一个用于Netscape Navigator，一个用于Microsoft Internet Explorer。 当W3C制定networking标准时，浏览器不能开始使用它们，因为这样做会打破networking上大多数现有的网站。 因此，浏览器引入了两种模式来处理与旧的遗留站点不同的新的符合标准的站点。
现在，下面就是为什么代码中的height: 100%在怪癖模式下工作而不是在标准模式下的具体原因：
在标准模式下 ，如果父元素的height: auto （没有高度定义），则子元素的百分比高度也将被视为height: auto （ 按照规范 ）。
这就是为什么你的第一个问题的答案是html { height: 100%; } html { height: 100%; } 。
对于height: 100%在你的div工作，你必须设置父元素的height （ 更多细节 ）。
然而，在怪异模式下，如果父元素的height: auto ，那么子元素的百分比高度是相对于视口测量的 。
这里有三个参考涵盖了这个行为：
- https://www.cs.tut.fi/~jkorpela/quirks-mode.html
- https://stackoverflow.com/a/1966377/3597276
- https://developer.mozilla.org/en-US/docs/Mozilla_Quirks_Mode_Behavior
TL; DR
以下是开发人员需要了解的内容：
在怪异模式下的浏览器将以不可预知，不可靠和经常不受欢迎的方式呈现网页。 所以总是包含一个文档DOCTYPE在标准模式下呈现。
select正确的DOCTYPE曾经是一个模棱两可的，有点混乱的过程与许多DOCTYPE版本可供select 。 但今天这个过程如此简单。 只要使用：
<!DOCTYPE html>
你是说垂直的？ div是块级元素，因此默认情况下它们会水平填充父级。
为了这个工作，你还需要给HTML标签100％的高度。
html, body { height:100%; }
看到这里的工作示例：
http://jsfiddle.net/uhg0y9tm/1/
正如其他人在这里所述，一旦你删除第一行（HTML5的文档types），浏览器将以不同的方式呈现页面，在这种情况下，没有必要给HTML标签100％的显式高度。
使用HTML5文档types，您还需要在html元素上设置高度：
html { height:100%; }
您必须将<html>和<body>标签的宽度和高度设置为100％，因为将<div>的宽度和高度指定为100％时，意味着您将其分配为全宽和其父元素的高度，在这种情况下， <div>的父元素是<body> ， <body>的父元素是<html> 。
为什么当我删除
<!DOCTYPE html>标签时它会起作用？
因为当您删除<!DOCTYPE html>标记时，浏览器以不同的方式呈现页面，显示其他结果。
您将需要使您的HTML和身体标记高度100％来填充页面。
CSS：
html, body{ height: 100%; }
