为什么删除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属性，百分比值和DOCTYPE
您的问题的第一部分，询问如何对您的div施加100％的高度，其他人多次回答.本质上，在根元素上声明高度:
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.
在怪癖模式中，也称为 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.
以下是 Wikipedia 定义怪癖模式的方式:
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%在怪癖模式下而不在标准模式下工作的特定原因:
Now, here's the specific reason why the height: 100% in your code works in quirks mode but not in standards mode:
在标准模式中，如果父元素具有height: 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).
但是在怪异模式下，如果父元素具有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/zh-CN/docs/Mozilla_Quirks_Mode_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:
处于怪癖模式的浏览器将以以下方式呈现网页: 不可预测，不可靠且通常是不可取的.因此，总是包含一个 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屋！
