CSS - 为什么百分比高度不起作用？
这个问题在这里已经有了答案：
块元素的高度默认为块内容的高度。 所以，给定这样的事情：
<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 Snapshot 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%;
}