为什么删除 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(使用前将#替换为@)

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

  • ASP.Net 控件的 InnerHTML 和 InnerText 属性之间的区别?

    例如 在使用 ASP NET 控件时 h1 text h1 如果我们想更改标题的文本 我们可以通过两个属性来完成InnerHTML and InnerText 我想知道这两个属性之间的基本区别是什么 InnerHtml让您直接输入 HTML
  • 多列定义列表[重复]

    这个问题在这里已经有答案了 我有一个 dl 像这样 dl dt Quantity dd dt Size dd dt Rise dd dt Color dd dd dt dd dt dd dt dd dt dl 该列表是通过 php 动态生成
  • 将单选按钮放置在图像上

    我试图在图像上的确切位置放置一些单选按钮 我已将两者都放在 Div 中 但我不知道下一步该怎么做 这是我想要放置单选按钮的位置 红色圆圈 到目前为止 这是我的代码 center display block margin left auto
  • 有没有办法有一个屏蔽数字输入字段?

    我正在 Android 上创建一个 HTML5 应用程序 对于这个特定场景 我们有一个用于信用卡安全代码的输入字段 我们希望强制输入字段仅包含数字并被屏蔽 我没有运气搜索这个特定的案例 从我自己研究 尝试中可以看出 这不能纯粹通过 HTML
  • 为什么 Flexbox 会拉伸我的图像而不是保留纵横比?

    Flexbox 具有这种行为 它将图像拉伸到其自然高度 换句话说 如果我有一个带有子图像的 Flexbox 容器 并且我调整了该图像的宽度 则高度根本不会调整大小 并且图像会被拉伸 div display flex flex wrap wr
  • :hover 状态在 iOS 上不会结束

    我有一个带有悬停状态的简单菜单
  • 您能否确定 CSS 文件的范围,使其仅适用于给定元素的后代?

    给定一个 css 文件 有没有办法限制整个文件的范围 使其仅适用于给定元素内的元素 例如给定 div span class some element span div 有没有一种方法可以将整个 css 文件的范围应用于 容器 中的所有元素
  • 如何观察包含许多 sass 文件的整个目录/文件夹的变化

    我如何跟踪包含许多 sass 文件的整个目录的更改 我正在使用以下命令来观察 sass 的变化 file sass watch style scss style css 但是如何观察包含许多 sass 文件的整个目录 文件夹的变化 只需使用
  • 在导航栏下方添加背景图片

    我想在导航栏下方添加背景图像 具有完整窗口大小的宽度 它不应覆盖整个页面长度 而是从导航栏菜单下方开始 一直向下直到特定的指定高度 但宽度是满的 我参考了以下内容 但仍然没有结果 在 Twitter Bootstrap 中的导航栏下方启动背
  • 如何仅使用CSS设置某个角的边框半径

    如上所示 我可以只给顶部部分而不给底部提供半径 或者有时给底部而不是顶部提供半径吗 有没有办法只给一个角提供边界半径 Like border radius top left top right bottom right bottom lef
  • javascript中输入类型时间的值

    我有这个html
  • Ajax JSON 数据和灯箱冲突

    我有一个带有灯箱插件的画廊设置光廊 http sachinchoolur github io lightGallery docs 该画廊与静态 HTML 完美配合 当我动态抓取 API 数据并尝试让灯箱处理这些项目时 问题就出现了 我似乎无
  • Thymeleaf 下拉菜单中的默认值

    我正在使用 Spring MVC 和 thymeleaf 构建一个 Web 应用程序 我的下拉菜单是这样的并且它按预期工作
  • CSS - SASS:使用基于@each的mixins来生成多个背景

    我正在使用 CSS 创建发型和颜色目录 我有 55 种不同颜色和发型的组合 每种发型和颜色都有自己的图像 SVG 文件 我需要将它们全部组合成一个背景 使用 CSS3 的多背景功能 我编写了这个混合来生成多个背景 它基于 mixin在这篇文
  • 使用php表单更改href链接

    我正在制作一个带有搜索栏的网站 我想让搜索栏在 搜索 并显示结果后具有交互性 所以我希望 href 根据正在使用的 Id 进行更改 例如 有人搜索 Pinecones 如果它在数据库中 它将有一个 ID 在本例中是 4 一旦他们搜索它 它就
  • 显示表中的记录

    我的第一个 PHP 项目遇到了一些麻烦 我试图从 MySQL 数据库 有 3 条记录 获取数据并将其显示在表格中 问题是它似乎只显示记录 2 和 3 它跳过了第 1 条记录 请参阅我的代码并在下面显示 if mysqli connect e
  • 为什么字体扩展仅适用于 PDF,而不适用于其他格式(HTML、XLS、DOC)?

    通过 Jaspersoft Studio 我们使用以下设置将用于 Web 应用程序的内置 Windows Calibri 字体变体导出到字体扩展 JAR 中 导出的jrfontextensions jar内的目录结构如下 jrfontext
  • html 电子邮件的文档类型

    哪种 DOCTYPE 适合 HTML 电子邮件 如今 html 电子邮件中的 DOCTYPE 声明仅存在细微差别 虽然只是轻微的 但仍然建议在发送之前通过 Acid 或 Litmus 或任何其他测试软件上的电子邮件测试您的电子邮件
  • 为什么我的图像下方有空间? [复制]

    这个问题在这里已经有答案了 图像在下面获得了神秘的空白空间 即使padding 0 margin 0被应用 示范 http jsfiddle net cLETP 红色边框应该包围图像 但底部有空间 造成这种情况的原因是什么 如何删除该空间
  • 如何解决此错误:属性 rel 的原始源值错误

    我正在尝试使用 w3c 验证我的网站 但出现错误 Bad value original source for attribute rel on element link The string original source is not a

随机推荐

  • 为 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 所有页面如预期一样都是绿色的 我有两个问题 我该如何制作