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。

不是专家，但我想这可能与您将要在网页上上下滚动而不是横向滚动的假设有关。

这是带有百分比值的CSS height属性的简单明了解释：stackoverflow.com/a/31728799/3597276

#1 楼

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

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

#inner将长到足以容纳该段落，而#outer将长到足以容纳#inner。 >
将高度或宽度指定为百分比时，这是相对于元素父级的百分比。就宽度而言，除非另有说明，否则所有块元素的宽度一直与其父元素一样，一直到<html>；因此，块元素的宽度与它的内容无关，并且说width: 50%产生定义良好的像素数。

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

正确并得到充分解释。它们之间的区别在于，默认情况下宽度由其父元素的值定义，而高度由其内容的“值”定义。父母的价值与内容的价值

–亚瑟
13年1月11日，9：57

所以没有办法让身高反应灵敏吗？即-您有一排使用css背景色创建的彩色正方形，并且您希望这些正方形随着屏幕大小进行调整。 jjsFiddle

–克里斯L
14年5月27日在23:08

@ChrisM-根据您的使用方式，只需将相等的填充设置为所需框的一半宽度：jsfiddle.net/en9xyv30/1如果您想在框中放置内容，则可能需要将其绝对定位- -只需将top，right，bottom和left都设置为0（如果需要填充，则将其设置为0以外的相同值），内容将随框一起调整大小。

–约书亚·科迪（Joshua Coady）
14年8月27日在5:00

您也可以使用大众单元。 vw是一个单位，它是视口宽度的百分比。所以，像高度：10vw;宽度：10vw;将缩放到屏幕宽度并保持正方形。有关浏览器兼容性，请参见caniuse.com/#feat=viewport-units。

–约书亚·科迪（Joshua Coady）
2014年8月27日在5:11

小心用vw单位代替百分比，因为如果决定将元素放入另一个容器中，这将使您的生活变得非常艰难。

– Tomasz Mularczyk
16 Dec 16'在18:16

#2 楼

height属性中的百分比值有点复杂，并且width和height属性实际上在行为上有所不同。让我带您浏览规格。

height属性：

让我们看看CSS Snapshot 2010规格对height的评价：

百分比是相对于所生成的盒子的包含块的高度来计算的。如果未明确指定包含块的高度（即，它取决于内容的高度），并且该元素的位置不是绝对的，则该值将计算为“自动”。根元素上的百分比高度是相对于初始包含块的。注意：对于绝对定位的元素（其包含的块基于块级元素），百分比是根据该元素的填充框的高度计算的。

好，让我们逐步分解：

相对于生成的盒子的包含块的高度计算百分比。

什么是包含块？这有点复杂，但是对于处于默认static位置的普通元素，它是：

最近的块容器祖先框

或英语，其父框。（很高兴知道fixed和absolute的头寸也会是什么，但我忽略了这个简短的答案。）

所以举两个例子： />

 <div   id="a"  style="width: 100px; height: 200px; background-color: orange">
  <div id="aa" style="width: 100px; height: 50%;   background-color: blue"></div>
</div>

 <div   id="b"  style="width: 100px;              background-color: orange">
  <div id="bb" style="width: 100px; height: 50%; background-color: blue"></div>
</div>

在此示例中，#aa的包含块是#a，对于#b和#bb依此类推。到目前为止，一切都很好。

height的规范的下一个句子是我在对此答案的引言中提到的复杂性：高度），并且此元素不是绝对定位的，该值将计算为'auto'。

啊哈！

height:200px的50％为100px（对于#aa

，但是height:auto的50％为100px） auto，在#bb情况下为0px，因为没有内容可以将auto扩展为继续到width。

width属性：让我们看一下规格：

百分比是根据生成的盒子的包含块的宽度计算的。

看看这些熟悉的示例，它们是从前一个调整过的，以更改width而不是width：

 height

 <div   id="c"  style="width: 200px; height: 100px; background-color: orange">
  <div id="cc" style="width: 50%;   height: 100px; background-color: blue"></div>
</div>

在

<div   id="d"  style="            height: 100px; background-color: orange">
  <div id="dd" style="width: 50%; height: 100px; background-color: blue"></div>
</div>

的情况下，width:200px的50％为100px

#cc的50％为width:auto最终的50％ width:auto，没有特殊的规则可以区别对待这种情况。

现在，这是一个棘手的问题：height的含义不同，部分取决于是否为auto或width指定了它！对于height，仅表示适合容纳内容的高度*，但是对于height，width实际上更为复杂。您可以从代码段中看到，在这种情况下，最终它是视口的宽度。 br />宽度取决于其他属性的值。请参阅以下各节。

哇，这没有帮助。为免除您的麻烦，我发现了您的用例的相关部分，标题为“计算宽度和边距”，副标题为“正常流程中的块级不可替换元素”： >
其他属性的使用值中必须包含以下约束：

'margin-left'+'border-left-width'+'padding-left'+'width' +'padding-right'+'border-right-width'+'margin-right'=包含块的宽度

确定，因此auto加上相关的边距，边框和填充边框必须全部加到包含块的宽度上（不是width工作方式的后代）。仅再加上一个规范语句：

如果将'width'设置为'auto'，则其他任何'auto'值都将变为'0'，并且'width'从结果相等之后开始。

啊哈！因此，在这种情况下，height的50％是视口的50％。希望现在一切都终于有意义了！ spec好吧，现在一切都有意义。

如果可能的话，+ 10将给它一个“ +10”。

–亨利
2015年10月5日，9：06

很棒的解释-谢谢！我在框id ='b'中添加了一些字母，因此它实际上具有很高的高度。框id ='bb'的高度仍然是0-为什么？它不应该是框id ='b'的内容高度的一半吗？

–亚当
16年1月30日在22:08

@Adam对于高度，#bb的高度是auto的50％，这与auto相同，并且由于#bb中没有任何东西，因此它等于0。不能改变其高度为自动的事实。

– Flimm
16-2-5在19:47

“如果将'width'设置为'auto'，则其他所有'auto'值将变为'0'，并且'width'将根据结果相等。” .....我对这句话真的很困惑，你能澄清一下吗？

– carinlynchin
16年7月11日在13:13

@Flimm您能解释一下即使在父项上没有明确指定高度的情况下，为什么也可以在flex项的子项上设置％height的方法吗？我的意思是，当您有flex容器，flex项和flex项内的内部div时-在该内部div上以％设置高度时，它会继承flex子级的高度（将flex项的高度“设置”为汽车）。

–max
17年11月28日在0:11

#3 楼

我认为您只需要给它一个父容器即可，即使该容器的高度是用百分比定义的。

例如，如果您有标题，也可以这样做以减去像素，否则在调整窗口大小时％可能计算错误。高度：calc（100％-100px）;对于较旧的浏览器，请使用以下命令：height：-o-calc（100％-100px）; / *歌剧/身高：-webkit-calc（100％-100px）; /谷歌浏览器/高度：-moz-calc（100％-100px）; / Firefox * /

–杰森
17年5月26日在11:27

#4 楼

您需要给它一个高的容器。 width使用视口作为默认宽度

正确，但也请参阅@mu的答案以获取有关原因的解释。

–nchpmn
2011年4月14日下午5:51

#5 楼

另一种选择是为div添加样式

<div style="position: absolute; height:somePercentage%; overflow:auto(or other overflow value)">
 //to be scrolled 
</div>

，这意味着元素相对于最接近的祖先被放置。

谢谢为我工作:)

– Kishore Kumar
16年6月6日在5:54

#6 楼

没有内容，身高就没有价值可计算百分比。但是，如果未指定父级，则宽度将从DOM中获取百分比。（使用您的示例）将第二个div放在第一个div内，将产生一个结果...下面的示例...第一格的高度的百分比。

那使我想通了。我忘记了，当您构建自己的react元素时，必须将整个return封装在一个div中。所以我有我的#app div，然后是一个没有id的div，然后是我要设置大小的3个div ...我只是在中间div上放了一个id，并在此和bingo上做了绝对的样式！谢谢大家！ :)

–乔恩·桑索西（Jon Sansoucie）
17年5月1日17:36

编程黑洞网