Question

我无法理解为什么当我使用百分比时，我的屏幕上没有外观，但是当我使用像素时，我会这样做。

这是我的代码：

<body>
    <div class="container-content"></div>   
</body>

body{
    width: 100%;
    height: 100%;
}

.container-content{
    width: 50%;
    height: 50%;
    margin: 0 auto 0 auto;
    background-color: green;
}

如果我用一些内容占据我的div，它将不会产生我想要的效果。如果我将位置更改为绝对或固定，它将具有我想要的效果（只是一个框）。如果我只改变百分比而不是像素，它也会产生我想要的效果（只是一个盒子）。

我在这里错了什么？

感谢

Answer 1

在这类情况下，html / body元素的高度均为100%。这样做，它应该工作。

Example Here

html, body {
    height: 100%;
}

它不起作用的原因是因为html元素的初始高度为0。由于所有子元素都使用基于百分比的值，100%的{{1}}也是0 - 因此没有任何内容出现。

除非元素被占用，否则宽度和高度百分比不会产生影响

1 个答案: