程序员经验分享-hwhale

为什么删除 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），所有页面如预期一样都是绿色的。

我有两个问题：

  1. 我该如何制作div填充页面而不删除该标签？
  2. 为什么删除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

为什么删除 DOCTYPE 后高度 100% 仍有效？ 的相关文章

随机推荐

  • 为 MQTT 配置 Nginx 反向代理

    我正在尝试设置一个反向代理 将 localhost 8081 解析为安装在另一台计算机上的代理 我的 Nginx 配置文件是 worker processes 1 events worker connections 1024 server

  • 模拟 DirectShow 网络摄像头

    我是 DotNet 的开发人员 我想让 Skype 能够添加网络摄像头模拟器并将我的位图帧发送到 DirectShow 模拟器 在这种情况下 我可以在应用程序中绘制图像 并在 Skype 上将这些图像分享给我的朋友 我当时在 http ms

  • 浮动性能与双倍性能

    我做了一些计时测试 还阅读了一些文章 例如this one 最后一条评论 看起来在发布版本中 浮点和双精度值花费相同的处理时间 这怎么可能 当 float 与 double 值相比精度较低且较小时 CLR 如何在相同的处理时间内获得 dou

  • 进行本地 NuGet 包安装但收到错误 - 无法获取存储库签名信息

    我正在尝试按照 Samuel Jack 的回答进行离线 NuGet 包安装 Text 1 将文件添加到解决方案旁边名为 LocalPackages 的文件夹中 2 在解决方案文件旁边创建一个名为 NuGet config 的文件 nu pk

  • 将 protobuf 与 flink 结合使用

    我正在使用 flink 从 kafka 读取数据并将其转换为 protobuf 我面临的问题是当我运行 java 应用程序时出现以下错误 如果我修改unknownFields将变量名称更改为其他名称 它可以工作 但很难在所有 protobu

  • 如何从 Get-ChildItem 获取所有可执行文件的路径

    我目前正在尝试获取所有已安装应用程序的列表 并希望构建一个可以启动这些应用程序的功能 我正在使用这些 PowerShell 命令 gci HKLM SOFTWARE Microsoft Windows CurrentVersion Unin

  • ObjectInputStream available() 方法未按预期工作（Java）

    我一直试图找出为什么我编写的从文件中读取对象的方法不起作用 并意识到即使文件没有完全读取 ObjectInputStream 的 available 方法也会给出 0 在我使用 FileInputStream available 方法来确定

  • 如何在 Visual Code Editor 中为 C++ 项目准备/配置开发环境？

    我正在使用 Nodejs 和可视化代码编辑器处理 JavaScript 项目 我想知道是否可以为 C 项目配置如此出色的代码编辑器 我想链接调试器并制作一些热键来构建debug release项目的版本 C 项目是否可行 我应该为此做什么

  • 为方法调用的每个实例返回相同的值

    嗨 我没有使用 PowerMockito 而是使用普通的 PowerMockito 并尝试模拟如下内容 when any File class canWrite thenReturn Boolean FALSE 但我得到一个NullPoin

  • 如何在android中制作带有进度状态的圆形进度条？

    我想显示如下图所示的进度条以及进度状态 任何人都可以给我解决方案吗 None

  • 使用malloc动态创建字符串数组

    我正在尝试使用 C 语言创建一个字符串数组malloc 数组将保存的字符串数量可以在运行时更改 但字符串的长度将始终保持一致 我已经尝试过这个 见下文 但是遇到了麻烦 任何正确方向的提示将不胜感激 define ID LEN 5 char

  • 属性的属性有意义吗？

    因为这是一个关于设计的问题 所以我首先会说我拥有什么和我想要什么 I have使用组合的设计 ACell对象持有一个Shape and a Background对象 本例中是定制的 这两个都有自己的数据来定义它们 这是代码中的示例 clas

  • grep 匹配某个模式的行，以及匹配前后的行，直到不同模式

    Start pattern abc d End pattern Start pattern abc d ef ghij klm no End pattern Start pattern abc def hij End pattern Sta

  • 更快（更具可扩展性）的DataSet.Merge？

    我们在应用程序中使用强类型数据集 导入数据时我们使用方便的DataSet Merge 将 DataRows 从一个 DataSet 复制到另一个 DataSet 的操作 StringCollection lines ReadFromFile

  • Git 将修补程序分支合并到功能分支

    假设我们在 Git 中有以下情况 创建的存储库 mkdir GitTest2 cd GitTest2 git init master 中发生一些修改并提交 echo On Master gt file git commit a m Init

  • 使用 Google Apps 脚本删除 Google 文档中的表格行

    我正在尝试使用 Google Apps 脚本使用从电子表格到 Google 的信息来大量创建文档 但我不知道如何使用 Table 类 特别是方法 RemoveRow 我创建了一个示例 不太复杂 来说明我的问题 我有一个名为 销售报告 该文档

  • JavaScript 每次调用函数时都会编译该函数吗？

    假设我有这个功能 function A function B return 1 return 1 B 是否起作用B每次调用函数时都会编译A 我记得有人说不会 但我的记忆力已经生锈了 找不到参考资料 JavaScript 标准规定 JavaS

  • 某些三星设备上的编辑文本有限？

    我正在尝试将长文本从 SD 卡读取到 Android 中的编辑文本中 在几乎所有设备上 除了某些三星设备外 此功能都运行良好 当我尝试读取超过 10kb 的任何内容时 我读取的字符串也会获取整个文件 当我尝试将其添加到编辑文本时 它在 10

  • 如何在脚本内触发大括号扩展？

    我正在编写一个需要使用 shell 的大括号扩展的脚本 但我尝试过的任何方法都不起作用 对于 人为的 实例 假设我有一个包含字符串的变量 thing 01 02 我 显然 想将其扩展到 thing01 thing02 从脚本内部 我该怎么做

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

    这是整个代码 div style background color green height 100 width 100 div 什么也没有出现 但是如果我删除第一行 doctype 所有页面如预期一样都是绿色的 我有两个问题 我该如何制作

热门标签