Question

HTML代码：-

    <!DOCTYPE html>
    <html>
    <head>
        <title>The block-chain website</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="container">

        </div>

    </body>
    </html>

这是CSS代码：-

    *{
        margin: 0px;
        padding: 0px;
        font-family: sans-serif;
    }

    .container{
        width: 100%;
        height: 100%;
        background-color: #42455a;
    }

我页面中的问题是该颜色的div不在屏幕上。

Answer 1

未设置width和height的{{1}}和html属性。它们将由其中的内容自动设置。由于您只有一个没有内容的div，因此定义body和width属性将不会使height和body随您根据父级维度定义这些百分比而扩展。

只需定义html和width中的height和html：

body

Answer 2

当您使用百分比单位定义任何html元素的高度时，其高度都是使用其父元素的高度来计算的。

您已经在容器上设置了100%高度，容器的高度取决于其父代的高度，即父代的高度，但是body没有设置任何高度。

设置主体的高度，您的容器将占据主体高度的100％

要设置主体元素的高度，可以使用vh单位

body {
   height: 100vh;   /* set body height equal to height of the viewport */
}

Answer 3

因此，您告诉A具有datetime-但实际上，datetime是当前{em>创建 { {1}}。

这将产生以下渲染情况：

.container请求在height: 100%;处呈现。
要计算实际转换为多少像素，浏览器会检查父元素div.container，因为height的意思是body。
因此，要计算div.container的高度，浏览器需要检查height: 100%的孩子，因为{{1 }}是body，因为这些元素实际上是创建高度的元素。

这就是您的100%不可见的原因-它的高度为100% of parent element height的100％-恰好也是body。

要解决此问题，只需将body（ v iewport h 八分之100％）应用于height元素：

body

auto

Answer 4

您已将宽度和高度设置为100％。要查看颜色，您必须在div内编写或添加一些内容。然后，width和height属性将包裹它并填充每个空间。

如果要查看div的颜色而内部没有任何数据。我建议将宽度和高度设置为固定的px值，例如10px。

*{
    margin: 0px;
    padding: 0px;
    font-family: sans-serif;
}

.temp{
  width:100%;
  height:100%;
  background-color: #42455a;
}

.container{
    width: 100px;
    height: 100px;
    background-color: #42455a;
}

<!DOCTYPE html>
<html>
<head>
    <title>The block-chain website</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
    </div>
    <br>
    <div class="temp">
      SAS
    </div>

</body>
</html>

为什么当我添加CSS时页面没有显示背景颜色

4 个答案: