为什么删除 DOCTYPE 后高度 100% 仍有效？

2023-12-10

这是整个代码：

<!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

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

html { height: 100%; }

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

使用 CSSheight属性和百分比值.

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

为什么删除doctype让[绿色背景]发挥作用？

当您删除 DOCTYPE (文件类型声明）浏览器从标准模式 to 怪癖模式.

In 怪癖模式，也称为兼容模式，浏览器模拟旧的浏览器，因此它可以解析旧的网页 - 在网络标准出现之前编写的页面。处于怪异模式的浏览器假装是IE4, IE5 和导航器 4因此它可以按照作者的意图呈现旧代码。

就是这样维基百科定义怪异模式：

在计算中，怪异模式是指某些网络使用的技术浏览器以保持与网络的向后兼容性为旧浏览器设计的页面，而不是严格遵守标准模式下的 W3C 和 IETF 标准。

Here's MDN's take:

在过去的网络时代，页面通常由两种形式编写版本：一种用于 Netscape Navigator，一种用于 Microsoft Internet 探险家。当 W3C 制定 Web 标准时，浏览器无法开始使用它们，因为这样做会破坏大多数现有网站网络。因此浏览器引入了两种模式来对待新的符合标准的网站与旧的遗留网站不同。

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

In 标准模式，如果父元素有height: auto（没有定义高度），那么子元素的百分比高度也将被视为height: auto (根据规格).

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

For 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/en-US/docs/Mozilla_Quirks_Mode_Behavior

TL;DR

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

处于怪异模式的浏览器将以以下方式呈现网页不可预测、不可靠且常常不受欢迎。所以总是包括一个文档类型让文档呈现在标准模式.

选择正确的 DOCTYPE 曾经是一个模棱两可的问题令人困惑的过程多种DOCTYPE版本可供选择。但今天的过程和以前一样简单。只需使用：
<!DOCTYPE html>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

html

doctype

quirksmode