为什么高度的百分比值不起作用，而宽度的百分比值却可以呢?
例如:
<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%不会产生一个定义良好的值，除非你通过给父元素一个特定的高度来打破反馈循环。
没有内容，高度就没有值来计算百分比。但是，如果没有指定父元素，宽度将从DOM中获取百分比。(用你的例子)把第二个div放在第一个div里面，会呈现一个结果…在下面的例子…
<div id="working">
<div id="not-working"></div>
</div>
第二个div的高度是第一个div的30%。
我认为你只需要给它一个父容器…即使容器的高度是用百分比定义的。 这个接缝工作得很好:JSFiddle
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 50%;
}
高度属性中的百分比值有点复杂，宽度属性和高度属性之间的行为实际上是不同的。让我带你参观一下规格。
高度属性:
让我们来看看CSS Snapshot 2010规范是如何规定高度的:
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block. Note: For absolutely positioned elements whose containing block is based on a block-level element, the percentage is calculated with respect to the height of the padding box of that element.
好的，让我们一步一步地把它拆开:
该百分比是根据生成的框的包含块的高度计算的。
什么是包含块?这有点复杂，但对于默认静态位置的普通元素，它是:
最近的块容器祖先盒
或者用英语来说，是它的父方框。(知道固定位置和绝对位置是什么也是非常值得的，但我忽略了这一点，以使答案简短。)
举两个例子:
< span style=" font - family:宋体;身高:200 px;背景颜色:橙色”> <div id="aa" style="width: 100px;高度:50%;背景颜色:蓝色" > < / div > < / div >
< span style=" font - family:宋体;背景颜色:橙色”> < span style=" font - family:宋体;"高度:50%;背景颜色:蓝色" > < / div > < / div >
在这个例子中，#aa的包含块是#a，而#b和#bb则是这样。到目前为止，一切顺利。
身高规范的下一句话是我在介绍这个答案时提到的复杂性:
如果包含块的高度没有明确指定(即，它取决于内容高度)，并且该元素不是绝对定位，则该值计算为'auto'。
啊哈!包含块的高度是否已明确指定很重要!
高度的50%:200px在#aa的情况下是100px 但是高度的50%:auto是auto，在#bb的情况下是0px，因为没有内容可以让auto展开到
正如规范所述，包含块是否被绝对定位也很重要，但让我们转到宽度。
宽度属性:
那么宽度也是一样的吗?让我们看一看说明书:
百分比是根据生成的框的包含块的宽度计算的。
看看这些熟悉的例子，从前面的调整到改变宽度而不是高度:
< span style=" font - family:宋体;身高:100 px;背景颜色:橙色”> <div id="cc" style="width: 50%;身高:100 px;背景颜色:蓝色" > < / div > < / div >
< span style=" font - family:宋体;背景颜色:橙色”> <div id="dd" style="width: 50%;身高:100 px;背景颜色:蓝色" > < / div > < / div >
宽度:200px的50%在#cc的情况下是100px width的50%:auto是任意宽度的50%:auto最终是，不像height，没有特殊的规则来区别对待这种情况。
现在，这里是棘手的一点:auto意味着不同的东西，部分取决于它是否被指定为宽度或高度!对于高度，它只是表示适合内容*所需的高度，但对于宽度，auto实际上更复杂。您可以从代码片段中看到，在这种情况下，它最终是视口的宽度。
关于宽度的自动值，规范说了什么?
宽度取决于其他属性的值。请参阅下面的部分。
哇，这没什么用。为了省事，我找到了我们用例的相关部分，标题为“计算宽度和边距”，副标题为“正常流中的块级非替换元素”:
以下约束必须在其他属性的使用值之间保持: 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' =包含块的宽度
好的，那么width加上相关的边距，边框和填充边框的总和必须是包含块的宽度(不像height那样递减)。再来一句说明:
如果'width'被设置为'auto'，则任何其他'auto'值都将变为'0'，'width'将从由此产生的等式中得到。
啊哈!在这个例子中，width:auto的50%是viewport的50%。希望现在一切都有意义了!
脚注
至少在这种情况下是如此。好吧，现在一切都说得通了。
另一个选择是为div添加样式
<div style="position: absolute; height:somePercentage%; overflow:auto(or other overflow value)">
//to be scrolled
</div>
这意味着一个元素的定位相对于最近的定位祖先。
