html - 高度百分比在 CSS 中不起作用

Question

我正在尝试使用百分比来使用高度属性，但它不起作用。我想使用百分比，所以它在任何分辨率下看起来都很好。

<div id="bloque_1" style="height: 80%;background: red">   
</div>

我怎样才能让它工作？

score 40 · Accepted Answer

当您使用%宽度或高度时，您应该问的第一个问题是80%什么？所以你还需要对父元素应用高度，所以假设你的这个元素在body标签内，你需要在你的CSS中使用它

html, body {
   height: 100%;
}

所以现在你的div元素将80%是100%

旁注：此外，当您处理absolute定位元素时，您可能会遇到div不会超过当前视口高度的情况，因此在这种情况下，您需要min-height

score 5 · Accepted Answer

外面的所有东西bloque_1也需要一个高度，否则你会得到 0 的 80%。你可能还必须将 100% 的高度应用于body.

这是一个jsfiddle，它显示了它的作用。

score 2 · Accepted Answer

100%在父元素上应用高度

HTML代码-

<html>
<body>
<div id="bloque_1" style="height:80%;background:red;width:100%;">   
</div>
</body>
</html>

CSS部分-

html, body { height: 100%; width: 100%; margin: 0;background: #3c3c3c }

score 0 · Accepted Answer

0

html,body{
    height:100%
}
#bloque_1{
    background:red;
    height:80%;
}

于 2013-05-20T05:05:18.173 回答

4 回答 4