为什么删除 DOCTYPE 后高度 100% 有效? [英] Why does height 100% work when DOCTYPE is removed?
问题描述
这是完整的代码:
<!DOCTYPE HTML>
<html>
<body style="height: 100%; padding: 0; margin: 0;">
<div style="background-color: green; height: 100%; width: 100%"></div>
</body>
</html>
什么都没有出现.但是如果我删除第一行(doctype)，所有页面都是绿色的.
Nothing appears. But if I remove the first line (the doctype), all of the page is green as expected.
我有两个问题:
- 如何让
div填充页面而不删除该标签? - 为什么删除
doctype会使其工作?
- How do I make the
divfill the page without removing that tag? - Why does removing the
doctypemake it work?
推荐答案
CSS height 属性、百分比值 &文档类型
关于如何将 100% 高度应用于 div 的问题的第一部分已被其他人多次回答.本质上，在根元素上声明一个高度:
CSS height property, percentage values & DOCTYPE
The first part of your question asking how to apply a 100% height to your div has been answered several times by others. Essentially, declare a height on the root element:
html { height: 100%; }
可以在此处找到完整的说明:
A complete explanation can be found here:
您问题的第二部分受到的关注要少得多.我会尽力回答这个问题.
The second part of your question has received much less attention. I'll try to answer that.
为什么删除 doctype 会使 [绿色背景] 起作用?
Why does removing the
doctypemake [the green background] work?
当您删除 DOCTYPE(文档类型声明)时，浏览器从标准切换模式到怪癖模式.
When you remove the DOCTYPE (document type declaration) the browser switches from standards mode to quirks mode.
在怪癖模式中，也称为兼容模式，浏览器模拟旧浏览器，因此它可以解析旧网页–在 Web 标准出现之前创作的页面.quirks 模式下的浏览器伪装成 IE4、IE5 和 Navigator 4 因此它可以按照作者的意图呈现旧代码.
In quirks mode, also known as compatibility mode, the browser simulates an old browser so it can parse old web pages – pages authored before the advent of web standards. A browser in quirks mode pretends to be IE4, IE5 and Navigator 4 so it can render old code as the author intended.
以下是维基百科定义怪癖模式的方式:
Here's how Wikipedia defines quirks mode:
在计算中，怪癖模式是指某些网络使用的技术浏览器，以保持与 Web 的向后兼容性为旧浏览器设计的页面，而不是严格遵守标准模式下的 W3C 和 IETF 标准.
In computing, quirks mode refers to a technique used by some web browsers for the sake of maintaining backward compatibility with web pages designed for older browsers, instead of strictly complying with W3C and IETF standards in standards mode.
这是 MDN 的看法:
在过去的网络时代，页面通常分为两部分版本:一种用于 Netscape Navigator，一种用于 Microsoft Internet探险家.当 W3C 制定 Web 标准时，浏览器无法刚开始使用它们，因为这样做会破坏大多数现有网站网络.因此浏览器引入了两种模式来处理新的符合标准的网站与旧网站不同.
In the old days of the web, pages were typically written in two versions: One for Netscape Navigator, and one for Microsoft Internet Explorer. When the web standards were made at W3C, browsers could not just start using them, as doing so would break most existing sites on the web. Browsers therefore introduced two modes to treat new standards compliant sites differently from old legacy sites.
现在，以下是您代码中的 height: 100% 在 quirks 模式下有效但在标准模式下无效的具体原因:
Now, here's the specific reason why the height: 100% in your code works in quirks mode but not in standards mode:
在标准模式中，如果父元素具有高度: auto(没有定义高度)，那么子元素的百分比高度也会被当作height: auto (根据规范).
In standards mode, if the parent element has a height: auto (no height defined), then the percentage heights of child elements will also be treated as height: auto (as per the spec).
这就是为什么你的第一个问题的答案是 html { height: 100%;}.
This is why the answer to your first question is html { height: 100%; }.
要使 height: 100% 在您的 div 中工作，您必须在父元素上设置 height (更多详情).
For height: 100% to work in your div, you must set a height on parent elements (more details).
然而，在 quirks 模式下，如果父元素具有 height: auto，则子元素的百分比高度是相对于视口测量的.
In quirks mode, however, if the parent element has a height: auto, then the percentage heights of child elements are measured relative to the viewport.
以下是涉及此行为的三个参考资料:
Here are three references covering this behavior:
- 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
简而言之，开发人员需要了解以下内容:
Here's what developers need to know in a nutshell:
处于 quirks 模式的浏览器将以如下方式呈现网页不可预测、不可靠且通常不受欢迎.所以总是包含一个DOCTYPE 用于以标准模式呈现的文档.
A browser in quirks mode will render web pages in a way that is unpredictable, unreliable and often undesirable. So always include a DOCTYPE for the document to render in standards mode.
选择正确的 DOCTYPE 曾经是一个模棱两可的事情许多 DOCTYPE 版本可供选择，使过程变得混乱.但今天，这个过程和以往一样简单.只需使用:
Selecting the right DOCTYPE used to be an ambiguous and somewhat confusing process with many DOCTYPE versions to choose from. But today the process is as simple as ever. Just use:
<!DOCTYPE html>
这篇关于为什么删除 DOCTYPE 后高度 100% 有效?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
