你是说垂直吗？ div 是块级元素，因此默认情况下它们会水平填充父元素。

为了使其正常工作，您还需要将 HTML 标记的高度设置为 100%。

html, body { height:100%; }

请参阅此处的工作示例：

http://jsfiddle.net/uhg0y9tm/1/

正如这里其他一些人所说，一旦删除第一行（HTML5 文档类型），浏览器将以不同的方式呈现页面，在这种情况下，没有必要为 HTML 标签指定明确的高度100%。

CSS height 属性、百分比值和 DOCTYPE

您的问题的第一部分询问如何将 100% 高度应用到您的 div ，其他人已多次回答。本质上，声明根元素的高度：

html { height: 100%; }

完整的解释可以在这里找到：

• 使用 CSS height 属性和百分比值。

您问题的第二部分受到的关注要少得多。我会尝试回答这个问题。

当您删除 DOCTYPE（文档类型声明）时，浏览器将从标准切换模式到怪异模式。

在怪异模式下，也称为兼容模式，浏览器模拟旧浏览器，以便它可以解析旧网页 - 在网络标准出现之前编写的页面。处于怪异模式的浏览器会伪装成 IE4，IE5 和 Navigator 4，以便它可以按照作者的意图呈现旧代码。

以下是Wikipedia如何定义怪癖模式：

以下是 MDN 的观点：

现在，以下是代码中的 height: 100% 在怪异模式下工作但在标准模式下不起作用的具体原因：

在标准模式中，如果父元素具有高度: auto （没有定义高度），那么子元素的百分比高度也将被视为 height: auto (按照规范）。

这就是为什么你的第一个问题的答案是 html { height: 100%; }.

要使 height: 100% 在 div 中工作，您必须在父元素上设置 height (更多详细信息）。

但是，在怪异模式下，如果父元素具有 height: auto，则子元素的百分比高度将相对于视口进行测量。

以下是涵盖此行为的三个参考文献：

• https://www.cs.tut.fi/~jkorpela/怪异模式.html
• https://stackoverflow.com/a/1966377/3597276
• https://developer.mozilla.org/en-US/docs/Mozilla_Quirks_Mode_Behavior

TL;DR

简而言之，以下是开发人员需要了解的内容：