为什么只有在删除DOCTYPE时，我的div高度才能100％起作用？
这是完整的代码：
<!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%; }
问题的 第二部分 受到的关注要少得多。我会尽力回答。
为什么去除
doctypemake（绿色背景）有效？
当您删除DOCTYPE文档类型声明时，浏览器将从标准模式 切换为 怪异模式 。
在怪癖模式（也称为兼容模式）下，浏览器模拟一个旧的浏览器，以便它可以解析旧的网页-
在Web标准问世之前创作的页面。处于古怪模式的浏览器伪装为IE4，IE5和Navigator4，因此它可以按照作者的预期呈现旧代码。
下面是维基百科定义
在计算中，“怪癖”模式是指某些Web浏览器为了保持与为较旧的浏览器设计的网页的向后兼容性而使用的技术，而不是在标准模式下严格遵守W3C和IETF标准。
这是MDN的举动：
在网络的早期，页面通常以两种版本编写：一种用于Netscape Navigator，另一种用于Microsoft Internet
Explorer。在W3C制定Web标准时，浏览器不能仅仅开始使用它们，因为这样做会破坏Web上大多数现有的网站。因此，浏览器引入了两种模式，以区别于旧的旧站点来处理符合新标准的站点。
现在，这是height: 100%代码中的代码在怪癖模式下而不在标准模式下工作的特定原因：
在标准模式下，如果父元素的height:auto高度（未定义高度），则子元素的百分比高度也将被视为height:auto按照规范。
这就是为什么第一个问题的答案是html { height: 100%; }。
为了height:100%在中工作div，您必须height在父元素上设置一个。
但是，在怪癖模式下，如果父元素具有a height: auto，则将 相对于视口 测量子元素的高度百分比。
TL; DR
简而言之，这是开发人员需要了解的内容：
处于怪异模式的浏览器将以一种无法预测，不可靠且通常不受欢迎的方式呈现网页。因此，请 始终包括DOCTYPE
，以便文档以标准模式呈现。
选择正确的DOCTYPE过去是一个模棱两可且有些混乱的过程，许多DOCTYPE版本可供选择。但是今天的过程像以往一样简单。只需使用：
<!DOCTYPE html>
-
问题内容： 这是完整的代码： 什么也没出现。但是，如果我删除第一行（），则所有页面均按预期绿色。 我有两个问题： 如何在不删除标签的情况下填写页面？ 为什么要删除使其起作用？ 问题答案： CSS 属性，百分比值和DOCTYPE 问题的 第一部分 询问如何对您的身高施加100％的高度，其他人多次回答。本质上，在根元素上声明高度： 问题的 第二部分 受到的关注要少得多。我会尽力回答。 为什么去除mak
-
我正在为一个非常简单的图库webapp整理布局，但是当我使用HTML5 doctype声明时，我的一些div（100%）的高度会立即缩小，而且我似乎无法使用CSS使它们丰满起来。 我的HTML在https://dl.dropbox.com/u/16178847/eyewitness/b/index.htmlcss在https://dl.dropbox.com/u/16178847/eyewitne
-
问题内容： 我使用占用所有可用空间的第三方组件，即width=100%和height=100%。我没有控制权。 我正在尝试使其适合以下布局，但是它height=100%不起作用（我希望第三方组件占据所有绿色空间）。 为什么？您将如何解决？ 问题答案： 通常，对于使用percent on height来获取其父代的高度的元素，父代需要的高度不是auto或定位为绝对高度，否则height将计算为aut
-
问题内容： 我有两个div，高度为90％，但显示方式有所不同。 我试图在它们周围放一个外部div，但这没有帮助。另外，在Firefox，Chrome，Opera和Safari上也是如此。 有人可以解释为什么我遇到这个问题吗？ 下面是我的代码： 问题答案： 使用（视口高度）代替百分比。它将获取浏览器的高度并相应地调整其大小，例如 试试这个代码 与CSS
-
问题内容： 我有两个div，高度为90％，但显示方式有所不同。 我试图在它们周围放一个外部div，但这没有帮助。此外，在Firefox，Chrome，Opera和Safari上也是如此。 有人可以解释为什么我遇到这个问题吗？ 下面是我的代码： 问题答案： 使用（视口高度）代替百分比。它将获取浏览器的高度并相应地调整其大小，例如 试试这个代码 与CSS
-
问题内容： 我正在尝试使文本的高度为100％，但它不起作用。 它只是成为的100％。 有什么办法让它跟随div的高度吗？ 该高度是整个页面的4％，我wan’t文本跟随它，当你调整大小/分辨率的变化。 问题答案： 为了获得想要的结果，我必须使用以下代码： 谢谢joshuanhibbert @ css-tricks的帮助！