CSS –为什么百分比身高不起作用？

一尘不染

CSS –为什么百分比身高不起作用？

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端部的宽度为视口的80％，但#not-working端部的高度为0。

阅读 344

2020-05-16

共1个答案

一尘不染

块元素的高度默认为块内容的高度。因此，给定这样的东西：

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

#inner将生长到足以容纳段落的高度，并且#outer将生长到足以容纳段落的高度#inner。

当您将高度或宽度指定为百分比时，这是相对于元素父级的百分比。对于宽度，除非另有说明，否则所有块元素的宽度一直与其父元素一样，一直到<html>；因此，块元素的宽度与它的内容无关，也就是说，它width: 50%产生了定义良好的像素数。

但是，除非您指定特定的高度，否则块元素的高度 取决于其内容 。因此，在涉及高度的父级和子级之间会有反馈，并且height: 50%除非您通过给父元素指定特定的高度来打破反馈循环，否则不会产生明确定义的值。

2020-05-16