为什么高度的百分比值不起作用，而宽度的百分比值却可以呢?
例如:
<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。
当你以百分比的形式指定高度或宽度时，这是相对于元素的父元素的百分比。在width的情况下，除非另有指定，否则所有块元素都与它们的父元素一样宽，一直到<html>;因此，block元素的宽度与它的内容无关，width: 50%表示一个明确定义的像素数。
但是，块元素的高度取决于它的内容，除非您指定了特定的高度。因此，在父元素和子元素之间存在关于高度的反馈，并且说高度:50%不会产生一个定义良好的值，除非你通过给父元素一个特定的高度来打破反馈循环。
其他回答
我认为你只需要给它一个父容器…即使容器的高度是用百分比定义的。 这个接缝工作得很好:JSFiddle
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 50%;
}
没有内容，高度就没有值来计算百分比。但是，如果没有指定父元素，宽度将从DOM中获取百分比。(用你的例子)把第二个div放在第一个div里面，会呈现一个结果…在下面的例子…
<div id="working">
<div id="not-working"></div>
</div>
第二个div的高度是第一个div的30%。
另一个选择是为div添加样式
<div style="position: absolute; height:somePercentage%; overflow:auto(or other overflow value)">
//to be scrolled
</div>
这意味着一个元素的定位相对于最近的定位祖先。
块元素的高度默认为块内容的高度。假设是这样的:
<div id="outer">
<div id="inner">
<p>Where is pancakes house?</p>
</div>
</div>
#inner将增长到足够高以包含段落，#outer将增长到足够高以包含#inner。
当你以百分比的形式指定高度或宽度时，这是相对于元素的父元素的百分比。在width的情况下，除非另有指定，否则所有块元素都与它们的父元素一样宽，一直到<html>;因此，block元素的宽度与它的内容无关，width: 50%表示一个明确定义的像素数。
但是，块元素的高度取决于它的内容，除非您指定了特定的高度。因此，在父元素和子元素之间存在关于高度的反馈，并且说高度:50%不会产生一个定义良好的值，除非你通过给父元素一个特定的高度来打破反馈循环。
你需要给它一个有高度的容器。Width使用视口作为默认宽度
