为什么删除DOCTYPE时高度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可以使其正常工作？

#1 楼

CSS height属性，百分比值和DOCTYPE

问题的第一部分询问如何对div施加100％的高度，其他人多次回答。本质上，在根元素上声明高度：

html { height: 100%; }

可以在此处找到完整的说明：

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

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

为什么删除doctype会使[绿色背景]起作用？

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

在怪癖模式（也称为兼容模式）下，该浏览器模拟一个旧的浏览器，因此它可以解析旧的网页-在Web标准问世之前创作的网页。处于怪癖模式的浏览器假装为IE4，IE5和Navigator 4，因此它可以按照作者的预期呈现旧代码。

Wikipedia定义怪癖模式的方式如下：

在计算中，“怪癖”模式是指某些Web
浏览器使用的一种技术，目的是保持与为较早浏览器设计的Web
页面的向后兼容性，而不是严格遵守
W3C和在标准模式下的IETF标准。

MDN采取的做法是：

在Web的早期，页面通常是用两个页面编写的。 />版本：一个用于Netscape Navigator，一个用于Microsoft Internet
Explorer。在W3C制定Web标准时，浏览器不能
开始使用它们，因为这样做会破坏Web上的大多数现有站点。因此，浏览器引入了两种模式来对待与新的
标准兼容的站点与旧的旧站点不同。

现在，这就是代码中的height: 100%在怪癖模式下工作的具体原因，但是不在标准模式下：

在标准模式下，如果父元素具有height: auto（未定义高度），则子元素的百分比高度也将被视为height: auto（根据规范）。

此这就是为什么第一个问题的答案是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 / zh-CN / docs / Mozilla_Quirks_Mode_Behavior

TL; DR

以下是开发人员需要了解的内容：

怪癖模式下的浏览器将以不可预测，不可靠且经常出现的方式呈现网页。 n不可取。因此，始终包括一个
DOCTYPE以便在标准模式下呈现该文档。

选择正确的DOCTYPE过去是一个模棱两可的过程，并且有些混淆，许多DOCTYPE版本可供选择。。但是
今天的过程和以往一样简单。只需使用：

<!DOCTYPE html>

我把这个老问题标记为与这个问题重复的部分。您的清单上还有一个;）

– BoltClock♦
16-2-19在17:17

#2 楼

你是垂直的意思吗？ div是块级元素，因此默认情况下它们确实水平填充父级。

为了使其正常工作，还需要给HTML标签设置100％的高度。

html, body { height:100%; }

请参见此处获取工作示例：

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

如上所述与这里的其他人一样，一旦删除第一行（HTML5 doctype），浏览器将以不同的方式呈现页面，在这种情况下，不必将HTML标签的显式高度设置为100％。

#3 楼

对于HTML5文档类型，您还需要在html元素上设置高度：

html {
    height:100%;
}

#4 楼

您还必须将<html>和<body>标签的宽度和高度设置为100％，因为当您将<div>的宽度和高度分配为100％时，这意味着您正在为其分配其父元素的全部宽度和高度。，在这种情况下，<div>的父元素是<body>，而<body>的父元素是<html>。

为什么删除<!DOCTYPE html>标记后它会起作用？

因为删除<!DOCTYPE html>标记，浏览器会以不同的方式呈现页面方式，显示其他结果。

最后，一个有意义的解释。如果html和body元素没有展开以覆盖页面，则它们包含的元素也不会扩展。这是一个很好的答案。

– MarcD
18年5月14日在13:02

#5 楼

您需要将html和body标签的高度设置为100％才能填充页面。

css：

html, body{
  height: 100%;
}

编程黑洞网