为什么仅在删除DOCTYPE时，我的div高度才能100％起作用？

一尘不染

为什么仅在删除DOCTYPE时，我的div高度才能100％起作用？

css

这是完整的代码：

<!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使其起作用？

阅读 261

2020-05-16

共1个答案

一尘不染

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>

2020-05-16