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; }
＃工作的宽度最终为视口的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%的反馈height: 50%不会产生一个明确定义的值，除非通过给父母元素一个特定的高度来打破反馈循环。
height属性中的百分比值有一点复杂性， width和height属性实际上表现方式各不相同。 让我带你参观规格。
height属性：
让我们来看看什么CSS快照2010规范说height ：
百分比是根据生成的包含盒子的高度来计算的。 如果包含块的高度没有明确指定（即，取决于内容高度），并且该元素没有被绝对定位，则该值计算为“auto”。 根元素上的百分比高度是相对于初始包含块的百分比。 注：对于包含块基于块级元素的绝对定位元素，将根据该元素的填充框的高度计算百分比。
好，让我们一步一步分开：
百分比是根据生成的包含盒子的高度来计算的。
什么是包含块 ？ 这有点复杂，但是对于默认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>
你需要给它一个高度的容器。 宽度使用视口作为默认宽度
我想你只需要给它一个父容器即使这个容器的高度是以百分比定义的。 这接缝工作得很好： JSFiddle
html, body { margin: 0; padding: 0; width: 100%; height: 100%; } .wrapper { width: 100%; height: 100%; } .container { width: 100%; height: 50%; }
另一个选择是添加样式到div
<div style="position: absolute; height:somePercentage%; overflow:auto(or other overflow value)"> //to be scrolled </div>
这意味着一个元素相对于最近的定位祖先而定位。
没有内容，高度没有价值来计算的百分比。 但是，如果没有指定父项，则宽度将取自DOM的百分比。 （用你的例子）把第二个div放在第一个div里面，会在下面给出结果…例子…
<div id="working"> <div id="not-working"></div> </div>
第二个div将是第一个div的30％。
