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

  • Z时代
  • 2024-01-10
  • 分类：问答

为什么百分比值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。

回答：

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

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

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

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

50%产生了定义良好的像素数。

但是，除非您指定特定的高度，否则块元素的高度 。因此，在涉及高度的父级和子级之间会有反馈，并且height:

50%除非您通过给父元素指定特定的高度来打破反馈循环，否则不会产生明确定义的值。

以上是 CSS –为什么百分比身高不起作用？ 的全部内容， 来源链接： utcz.com/qa/399216.html

回到顶部