HTML5 与 HTML 背景颜色答案

【问题标题】：HTML5 vs HTML background colorHTML5 与 HTML 背景颜色
【发布时间】：2017-01-25 18:42:55
【问题描述】：

目的是通过使用 div 使页面的整个背景颜色变为蓝色。使用普通 HTML，我看到蓝色。使用 HTML5（通过包含 doctype 标签），我只在 #mobile div 内的文本区域中看到一个蓝色条带。为什么是这样？如何修复 HTML5 版本？

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      body{   
        height: 100%;
        margin: 0 auto; 
        background: yellow;
      }	
    </style>
  </head>
  <body>
    <div id="mobile" style="width: 100%;height: 100%;background-color: blue;">
      Test text
    </div>
  </body>
</html>

【问题讨论】：

如果您可以使用viewport units，如vh，请查看我的答案

标签： html background-color

【解决方案1】：

1) 也将html 设置为height: 100%;。

2) body 可能高于屏幕。所以body最好用min-height: 100%;。

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      html {   
        height: 100%;
      }
      body {   
        min-height: 100%;
        margin: 0 auto; 
        background: yellow;
      }	
    </style>
  </head>
  <body>
    <div id="mobile" style="width: 100%;height: 100%;background-color: blue;">
      Test text
    </div>
  </body>
</html>

【讨论】：

【解决方案2】：

原因是浏览器有“标准模式”和“怪癖模式”。 doctype 的存在会触发标准合规模式。当浏览器检测到没有 doctype 的网页时，它们会恢复到“怪癖模式”，这基本上假定这些页面包含遗留代码，并且浏览器会尝试捕获并纠正错误。

您可以使用以下 CSS 将符合标准的页面（即包含 HTML 文档类型的页面）完全设为蓝色：

html { background-color: blue }

【讨论】：

【解决方案3】：

https://jsfiddle.net/r8dz1sa5/2/也许这就是你要找的。并且 div 将高度 100% 放在里面。这就是我们将 div 高度更改为屏幕高度的原因，您可以将其设置为内联，只需将高度替换为“vh”Viewport units: vw, vh, vmin, vmax

<div id="mobile" style="width: 100%;height: 100vh;background-color: blue;">

【讨论】：

【解决方案4】：

上述解决方案的问题是当文本溢出正文时，您仍然会得到黄色背景看到这个第一个sn-p：https://jsfiddle.net/t6effobg/1/

在我看来这是一个更好的选择。在移动 ID 上添加 "min-height:100%" 而不是高度，这样它总是适合它的父级：https://jsfiddle.net/t6effobg/

【讨论】：

【解决方案5】：

你需要这个：

html, body {
  height: 100%;
}

否则 DIV 的 100% 高度没有参考高度。

【讨论】：

【解决方案6】：

我觉得这方面的答案可能更具体。

这是为什么？

我认为explanation by MDN 很合适：

在 Web 的旧时代，页面通常以两种版本编写：一种用于 Netscape Navigator，另一种用于 Microsoft Internet Explorer。当 W3C 制定 Web 标准时，浏览器不能只是开始使用它们，因为这样做会破坏 Web 上大多数现有的站点。因此，浏览器引入了两种模式来区别对待符合标准的新网站和旧旧网站。

Web 浏览器中的布局引擎现在使用三种模式：怪癖模式、几乎标准模式和完全标准模式。在 quirks 模式下，布局模拟 Navigator 4 和 Internet Explorer 5 中的非标准行为。这对于支持在广泛采用 Web 标准之前构建的网站至关重要。在完全标准模式下，行为（希望）是 HTML 和 CSS 规范所描述的行为。在几乎标准模式下，只实现了极少数的怪癖。

浏览器如何确定使用哪种模式？对于 HTML 文档，浏览器使用文档开头的 DOCTYPE 来决定是在怪癖模式还是标准模式下处理它。为确保您的页面使用完全标准模式，请确保您的页面具有 DOCTYPE [...]

基本上这是说，如果您使用 DOCTYPE（您可能想要），所有 HTML 和 CSS 都会按照W3C standards 的描述应用于您的页面。

这些标准定义了你的身体默认没有高度。仍然有一个常见的误解，即它会将其设置为百分比，因为任何 DOM 元素上的百分比都将相对于其父元素。 <body> 的父级显然是 <html>。现在<html> 的父级将是您的视口（呈现页面的浏览器部分的尺寸）。您可以设置html {height: 100%}，现在<html> 将是您视口的大小，但<body> 与大多数其他DOM 元素一样，默认情况下不会继承此值：

html{
  height: 100%;
}
body{
  background: yellow;
  margin: 0;
}
div{
  background: papayawhip;
  height: 100%;
}

&lt;div&gt;By default a divs and a bodys height expands with its content or its parents defined size.&lt;/div&gt;

您必须将高度从视口向下传递到<html>，然后再向下传递到<body>。从那里它可以被其他元素继承：

html{
  height: 100%;
}
body{
  background: yellow;
  margin: 0;
  height: inherit;
}
div{
  background: papayawhip;
  height: inherit;
}

&lt;div&gt;We can override default behaviour by explicitly passing down the viewport height to html, from there to body and from there to any element.&lt;/div&gt;

这就是为什么您会经常在样式表中看到html, body {height: 100%}。最新的网络技术包括 viewport units 供您与 still not perfect browser support 一起使用以绕过这个问题：

body{
  background: yellow;
  margin: 0;
}
div{
  background: papayawhip;
  height: 100vh;
}

&lt;div&gt;Recent web technology provides easier methods.&lt;/div&gt;

我希望这可以帮助您真正了解您的文档中发生了什么。请注意，在使用 vh、vw 等新功能时，还有（一如既往）解决方法（有时称为 hack）可帮助您实现对旧浏览器的支持。

【讨论】：