身高百分比不工作在CSS

问题描述：

我想使用百分比的高度属性，但它不工作。我想使用百分比，所以在任何分辨率下看起来都不错。身高百分比不工作在CSS

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

我该如何让它工作？

身高比例是有点草率，但如果你坚持，使用百分比将只考虑容器的高度的百分比。尝试添加{最小高度：100％; }添加到您的{body}标签。 –

min-height doest work =（。我用它代替，身高：100％ – Flezcano

现在你会遇到问题，当你的内容高度需要扩大到100％以上 –

答

当您使用%为宽度或高度，你应该问的第一个问题是80%是什么？所以，你还需要办理高度父元素，所以假设你的这个元素是body标签里面，你需要在你的CSS使用此

html, body { 
    height: 100%; 
}

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

边注：此外，当你正在处理absolute定位的元素，你可能会遇到这样一个场景，你的div将不会超过当前视口的高度，所以在这种情况下，你需要有min-height

我一直在摆弄一段时间的类似问题，我一直将身体设置为100％，但不是HTML，谢谢！ –

答

bloque_1以外的所有东西都需要一个高度，否则您将获得0的80％。您可能还需要对body应用100％的高度。

这是一个jsfiddle，它显示了它的行动。

答

你的父元素

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 }

工作小提琴上的应用100%高度 - http://jsfiddle.net/SEafD/1/

答

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