为什么在删除 DOCTYPE 后 height 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），所有页面都会按预期显示为绿色。
我有两个问题：
- 如何在不删除该标记的情况下使
div 填满页面？
- 为什么删除
doctype 可以正常工作？
你是说纵向？ div 是块级元素，因此它们默认水平填充父元素。
为了使其正常工作，您还需要将 HTML 标签的高度设置为 100%。
html, body { height:100%; }
请在此处查看工作示例：
http://jsfiddle.net/uhg0y9tm/1/
正如其他一些人所说，一旦你删除了第一行（HTML5 文档类型），浏览器将以不同的方式呈现页面，在这种情况下，没有必要提供HTML 标签的显式高度为 100%。
使用 HTML5 文档类型，您还需要在 html 元素上设置高度：
html {
height:100%;
}
您需要将 html 和 body 标记的高度设置为 100% 才能填满页面。
css:
html, body{
height: 100%;
}
您还必须将 <html> 和 <body> 标签的宽度和高度设置为 100%，因为当您将 <div> 的宽度和高度指定为 100% 时，这意味着您正在为其分配其父元素的完整宽度和高度，在这种情况下 <div> 的父元素是 <body> 而 <body> 的父元素是 <html>。
Why does it works when I remove the <!DOCTYPE html> tag ?
因为当您删除 <!DOCTYPE html> 标签时，浏览器会以不同的方式呈现页面，显示其他结果。
CSS height 属性，百分比值和 DOCTYPE
您问题的第一部分 询问如何将 100% 高度应用到您的 div 已被其他人多次回答。本质上，在根元素上声明一个高度：
html { height: 100%; }
完整的解释可以在这里找到：
.
您问题的第二部分受到的关注要少得多。我会尽力回答这个问题。
Why does removing the doctype make [the green background] work?
当您删除 DOCTYPE (document type declaration) 时，浏览器从 标准模式 切换到 古怪模式 .
在 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 中，因此它可以按照作者的意图呈现旧代码。
以下是 Wikipedia 定义怪癖模式的方式：
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的截图：
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% 在怪癖模式下工作但在标准模式下不工作的具体原因：
在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%; }。
要使 height: 100% 在您的 div 中工作，您必须在父元素 () 上设置 height。
然而，在 quirks 模式下，如果父元素具有 height: auto，则子元素的百分比高度是相对于视口测量的。
以下是涵盖此行为的三个参考资料：
- https://www.cs.tut.fi/~jkorpela/quirks-mode.html
- https://developer.mozilla.org/en-US/docs/Mozilla_Quirks_Mode_Behavior
TL;DR
以下是开发人员需要了解的简要信息：
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>
这是完整的代码：
<!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填满页面？ - 为什么删除
doctype可以正常工作？
你是说纵向？ div 是块级元素，因此它们默认水平填充父元素。
为了使其正常工作，您还需要将 HTML 标签的高度设置为 100%。
html, body { height:100%; }
请在此处查看工作示例：
http://jsfiddle.net/uhg0y9tm/1/
正如其他一些人所说，一旦你删除了第一行（HTML5 文档类型），浏览器将以不同的方式呈现页面，在这种情况下，没有必要提供HTML 标签的显式高度为 100%。
使用 HTML5 文档类型，您还需要在 html 元素上设置高度：
html {
height:100%;
}
您需要将 html 和 body 标记的高度设置为 100% 才能填满页面。
css:
html, body{
height: 100%;
}
您还必须将 <html> 和 <body> 标签的宽度和高度设置为 100%，因为当您将 <div> 的宽度和高度指定为 100% 时，这意味着您正在为其分配其父元素的完整宽度和高度，在这种情况下 <div> 的父元素是 <body> 而 <body> 的父元素是 <html>。
Why does it works when I remove the
<!DOCTYPE html>tag ?
因为当您删除 <!DOCTYPE html> 标签时，浏览器会以不同的方式呈现页面，显示其他结果。
CSS height 属性，百分比值和 DOCTYPE
您问题的第一部分 询问如何将 100% 高度应用到您的 div 已被其他人多次回答。本质上，在根元素上声明一个高度：
html { height: 100%; }
完整的解释可以在这里找到：
您问题的第二部分受到的关注要少得多。我会尽力回答这个问题。
Why does removing the
doctypemake [the green background] work?
当您删除 DOCTYPE (document type declaration) 时，浏览器从 标准模式 切换到 古怪模式 .
在 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 中，因此它可以按照作者的意图呈现旧代码。
以下是 Wikipedia 定义怪癖模式的方式：
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的截图：
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% 在怪癖模式下工作但在标准模式下不工作的具体原因：
在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%; }。
要使 height: 100% 在您的 div 中工作，您必须在父元素 (height。
然而，在 quirks 模式下，如果父元素具有 height: auto，则子元素的百分比高度是相对于视口测量的。
以下是涵盖此行为的三个参考资料：
- https://www.cs.tut.fi/~jkorpela/quirks-mode.html
- https://developer.mozilla.org/en-US/docs/Mozilla_Quirks_Mode_Behavior
TL;DR
以下是开发人员需要了解的简要信息：
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>