CSS——为什么百分比高度不起作用？

<分区>

为什么 height 的百分比值不起作用，而 width 的百分比值却起作用？

<div id="working"></div>
<div id="not-working"></div>

#working{
    width:80%;
    height:140px;
    background:orange;
}
#not-working{
    width:80%;
    height:30%;
    background:green;
}

#working 的宽度最终为视口(viewport)的 80%，但 #not-working 的高度最终为 0。

最佳答案

block 元素的高度默认为 block 内容的高度。所以，给定这样的东西:

<div id="outer">
    <div id="inner">
        <p>Where is pancakes house?</p>
    </div>
</div>

#inner将长到足以包含段落和#outer会长到足以容纳#inner .

当您将高度或宽度指定为百分比时，这是相对于元素父元素的百分比。在宽度的情况下，除非另有说明，否则所有 block 元素都与其父元素一样宽，一直到 <html>。 ;因此， block 元素的宽度与其内容无关，即 width: 50%产生明确定义的像素数。

但是，除非您指定特定高度，否则 block 元素的高度取决于其内容。所以有家长和 child 反馈高度问题说height: 50%除非您通过为父元素指定特定高度来打破反馈循环，否则不会产生明确定义的值。

关于CSS——为什么百分比高度不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28546359/

相关文章：

html - 使用 Bootstrap 时获取 'data-wssurvey'