这是完整的代码：
<!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
问题的第一部分询问如何对div施加100％的高度，其他人多次回答。本质上，在根元素上声明高度：
html { height: 100%; }
完整的解释可以在这里找到：
Working with the CSS
height property and percentage values。问题的第二部分受到的关注要少得多。我会尽力回答。
为什么删除
doctype使[绿色背景]起作用？删除DOCTYPE（document type declaration）时，浏览器将从标准模式切换为怪异模式。
在quirks mode（也称为compatibility mode）中，浏览器模拟一个旧的浏览器，以便它可以解析旧的Web页面-Web标准出现之前编写的页面。处于怪癖模式的浏览器假装为IE4，IE5 and Navigator 4，因此它可以按照作者的预期呈现旧代码。
这是Wikipedia定义怪癖模式的方式：
在计算中，怪癖模式是指某些网络使用的技术
浏览器，以保持与Web的向后兼容性
专为旧版浏览器设计的页面，而不是严格遵守
W3C和IETF标准处于标准模式。
这是MDN的看法：
在网络的过去，页面通常以两部分的形式编写
版本：一个用于Netscape Navigator，一个用于Microsoft Internet
资源管理器。在W3C制定Web标准时，浏览器无法
刚开始使用它们，因为这样做会破坏网站上大多数现有的网站
网络。因此，浏览器引入了两种模式来处理新
符合标准的网站与旧的旧网站有所不同。
现在，这是代码中的
height: 100%在怪异模式下而不在标准模式下工作的特定原因：在standards mode中，如果父元素具有
height: auto（未定义高度），则子元素的百分比高度也将被视为height: auto（as per the spec）。这就是为什么第一个问题的答案是
html { height: 100%; }的原因。为了使
height: 100%在您的div中工作，必须在父元素（more details）上设置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，用于在standards mode中呈现的文档。
选择正确的DOCTYPE以前是模棱两可的
many DOCTYPE versions to choose from使过程混乱。但
今天的过程变得像以往一样简单。只需使用：
<!DOCTYPE html>
关于css - 为什么只有在删除DOCTYPE时，我的div高度才能100％起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36375277/