1. 首页
  2. 问题
  3. CSS - 为什么百分比高度不起作用？
小编典典

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

all

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


阅读 64

收藏
2022-05-10

共1个答案

小编典典

块元素的高度默认为块内容的高度。所以，鉴于这样的事情：

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

#inner将长到足以容纳段落并且#outer将长到足够高以容纳#inner.

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

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

2022-05-10