Question

目标是通过使用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>

Answer 1

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

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

html { background-color: blue }

Answer 2

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

为什么会这样？

我认为explanation by MDN非常适合：

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

现在，Web浏览器中的布局引擎使用了三种模式：怪癖模式，几乎标准模式和完全标准模式。在怪癖模式下，布局模拟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元素一样，默认情况下不会继承此值：

＆＃13;

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

＆＃13;

<div>By default a divs and a bodys height expands with its content or its parents defined size.</div>

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

这就是您经常在样式表中看到html, body {height: 100%}的原因。最新的网络技术包括viewport units，您可以使用still not perfect browser support来解决这个问题：

＆＃13;

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

＆＃13;

<div>Recent web technology provides easier methods.</div>

＆＃13;

我希望这可以帮助您真正了解更好地了解文档中发生的事情。请注意，在使用vh，vw等新功能时，还可以（总是如此）解决方法（有时称为黑客）来帮助您实现对旧版浏览器的支持。

Answer 3

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

2）body可能高于屏幕。因此，min-height: 100%;最好使用body。

<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>

Answer 4

https://jsfiddle.net/r8dz1sa5/2/也许这就是你要找的东西。 div占据了100％的高度。这就是为什么我们将div高度更改为屏幕高度你可以设置它内联只是用＆＃34; vh＆＃34; Viewport units: vw, vh, vmin, vmax

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

Answer 5

上述解决方案的问题是当文本溢出正文时，您仍会看到黄色背景，请看第一个代码段：https://jsfiddle.net/t6effobg/1/

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

Answer 6

你需要这个：

class Controller extends Component {
  constructor(props){
    super(props);
    this.test = this.test.bind(this);
  }
  componentDidMount() {
  }

  test(){
    // this.props.start
    console.log(this.props)
  }
  render(){
    return(
      <div className="container">
        <div className="row">
          <div className="col s12 controller">
            <a onClick={this.test} className="waves-effect waves-light btn">Start</a>
            <a onClick={this.props.clear} className="waves-effect waves-light btn">Clear</a>
            <a onClick={this.props.randomize}className="waves-effect waves-light btn">Randomize</a>
          </div>
        </div>
      </div>
    )
  }
}

function mapDispatchToProps(dispatch){
  return bindActionCreators({clear,randomize,start}, dispatch)
}


export default connect(null,mapDispatchToProps)(Controller)

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

HTML5与HTML背景颜色

6 个答案: