为什么我的div高度100％仅在DOCTYPE删除时工作？ [英] Why does my div height 100% work only 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 ），所有页面都是预期的绿色。
有两个问题：
- 如何使
div
CSS height 百分比值& DOCTYPE
您的问题的第一部分要求如何将<100％的高度应用于 div 已被其他人几次回答。基本上，在根元素上声明一个高度：
html {height：100％; }
完整的说明可以在这里找到：
第二部分你的问题收到的关注少得多。
为什么删除
doctype/en.wikipedia.org/wiki/Document_type_declarationrel =nofollow>文档类型声明）浏览器从标准模式切换到怪异模式。 / p>
在怪异模式中，也称为兼容模式，浏览器模拟旧浏览器，以便它可以解析旧网页–页面在Web标准出现之前创作。处于怪异模式的浏览器假装为 IE4 ， IE5和Navigator 4 ，以便它可以按作者的意图呈现旧代码。
维基百科定义怪癖模式的方式：
在计算中，怪异模式指的是某些web
浏览器使用的技术，以保持与web的向后兼容性b $ b页面设计
在网络的旧时代，页面通常用两个
版本编写：一个用于Netscape Navigator，另一个用于Microsoft Internet
Explorer。当Web标准在W3C制定时，浏览器不能
只是开始使用它们，因为这样做会破坏大多数现有的网站
的网络。因此，浏览器引入了两种模式来处理符合新bb b标准的网站，这与旧的旧网站不同。
现在，下面是代码中的
height：100％在怪异模式下工作而不是在标准模式下工作的具体原因：
在标准模式中，如果父元素具有
height：auto（未定义高度），则子元素的百分比高度也将被视为height：auto（按照规范）。这是为什么你的第一个问题的答案是
html {height：100％; }。
height：100％c> div ，您必须在父元素（ height
然而，在quirks模式下，如果父元素有
height：auto
这里有三个涉及这个行为的引用：
/ p>
- https://www.cs.tut.fi/~jkorpela/quirks-mode.html
- http://stackoverflow.com/a/1966377/3597276
- https://developer.mozilla.org/en-US/docs/Mozilla_Quirks_Mode_Behavior
TL; DR
以下是开发人员需要了解的内容： p>
浏览器在quirks模式下会以不可预测，不可靠和不经常的方式呈现网页。因此始终在 DOCTYPE >标准模式。
选择正确的DOCTYPE过去是一个含糊的，有点
的混淆过程，其中许多DOCTYPE版本可供选择。但是
今天的过程是一样简单。只需使用：<！DOCTYPE html>
¥b $ b
This is the entire code:
<!DOCTYPE HTML> <html> <body style="height: 100%; padding: 0; margin: 0;"> <div style="background-color: green; height: 100%; width: 100%"></div> </body> </html>Nothing appears. But if I remove the first line (the
doctype), all of the page is green as expected.I have two questions:
- How do I make the
divfill the page without removing that tag?- Why does removing the
doctypemake it work?
解决方案CSS
heightproperty, percentage values & DOCTYPEThe first part of your question asking how to apply a 100% height to your
divhas 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.
Why does removing the
doctypemake [the green background] work?When you remove the DOCTYPE (document type declaration) the browser switches from standards mode to quirks mode.
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:
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.
Here's MDN's take:
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.
Now, here's the specific reason why the
height: 100%in your code works in quirks mode but not in standards mode: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 asheight: auto(as per the spec).This is why the answer to your first question is
html { height: 100%; }.For
height: 100%to work in yourdiv, you must set aheighton parent elements (more details).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
- http://stackoverflow.com/a/1966377/3597276
- https://developer.mozilla.org/en-US/docs/Mozilla_Quirks_Mode_Behavior
TL;DR
Here's what developers need to know in a nutshell:
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.
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>
这篇关于为什么我的div高度100％仅在DOCTYPE删除时工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
