Question

我有一个非常简单的网站，我正在练习并且我的容器div的background-color出现问题。我确定这是一个非常简单的修复，但我想了解它为什么不起作用。这是我的CSS：

body {
  margin: 0px;
  padding:0px; 
  height: 100%; 
  background-color: black;
}

#Container {
  width: 98%;
  height: 100%;
  background-color: grey;
}

出于某种原因，我设法让它发挥作用的唯一方法是当我在我的身体造型中加入html时，是否有理由这样做？

body, html {
  margin: 0px;
  padding:0px; 
  height: 100%; 
  background-color: black;
}

由于

Answer 1

虽然问题是除了<html>根元素之外的元素需要具有指定宽度的父元素（为了计算它自己的相对高度），你可以避免使用相对于视口，例如vh（1vh等于视口的高度的百分之一，因此几乎是基于%的直接替代品高度），例如：

body {
    margin: 0px;
    padding:0px;
    height: 100vh;
    background-color: black;
}
#Container {
    width: 98%;
    height: 100%;
    background-color: grey;
}

JS Fiddle demo

当然，这种方法的问题在于它限制#Container的内容不会增长并允许<body>滚动（当然，这可能是按设计的），但是您可以使用min-height来避免问题，并允许元素增长：

html {
    padding: 0;
    margin: 0;
}
body {
    margin: 0px;
    padding:0px;
    min-height: 100vh;
    background-color: black;
}
#Container {
    width: 98%;
    min-height: 100vh;
    background-color: grey;
}
#expansion {
    height: 3000px;
    width: 2em;
    background-color: #f00;
}

JS Fiddle demo

（请注意，在上面的演示中我使用了另一个元素来强制#Container展开，这纯粹是为了演示目的，并不是这种方法所必需的。）

参考文献：

Answer 2

确保正确调用选择器。这是区分大小写的。

容器对容器（小c和大写C）以及（#Vs。）点（。）的类和哈希的ID（＃）

容器Div的背景颜色不起作用，不明白为什么？

2 个答案: