为什么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。
【问题讨论】：
height 属性的解释和百分比值：stackoverflow.com/a/31728799/3597276
另一种选择是将样式添加到 div
<div style="position: absolute; height:somePercentage%; overflow:auto(or other overflow value)">
//to be scrolled
</div>
这意味着一个元素是相对于最近的定位祖先定位的。
【讨论】：
height 属性中的百分比值有点复杂，width 和 height 属性实际上彼此不同。 让我带您了解一下规格。
height属性：我们来看看what CSS Snapshot 2010 spec says about height：
百分比是根据生成框的包含块的高度计算的。如果包含块的高度没有明确指定（即，它取决于内容高度），并且该元素不是绝对定位的，则该值计算为“自动”。根元素上的百分比高度相对于初始包含块。注意：对于包含块基于块级元素的绝对定位元素，百分比是相对于该元素的填充框高度计算的。
好的，让我们一步一步地分解：
百分比是根据生成框的包含块的高度计算的。
containing block 是什么？有点复杂，但是对于默认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% 在#aa 的情况下为 100px
height:auto 的 50% 是 auto，在 #bb 的情况下为 0px，因为 auto 没有内容可以展开到正如规范所说，包含块是否被绝对定位也很重要，但让我们继续讨论width。
width属性：那么width 的工作方式是否相同？一起来看看the spec：
百分比是根据生成框的包含块的宽度计算的。
看看这些熟悉的例子，从前面的调整到改变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% 在#cc 的情况下为 100px
width:auto 的 50% 是 width:auto 最终结果的 50%，与 height 不同，没有特殊规则可以区别对待这种情况。现在，这里有个棘手的问题：auto 表示不同的东西，部分取决于它是为width 还是height 指定的！对于height，它仅表示适合内容所需的高度*，但对于width，auto 实际上更复杂。您可以从代码 sn-p 中看到，在这种情况下，它最终成为视口的宽度。
the spec say about the auto value for width 是什么意思？
宽度取决于其他属性的值。请参阅以下部分。
哇，这没用。为了省去您的麻烦，我为您找到了我们用例的相关部分，标题为“计算宽度和边距”，副标题为 "block-level, non-replaced elements in normal flow"：
在其他属性的使用值中必须保持以下约束：
'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% 是视口的 50%。希望现在一切都变得有意义了！
脚注
* 至少，在这种情况下它很重要。 spec 好吧，现在一切都变得有意义了。
【讨论】：
% 高度即使在父母没有明确指定高度的情况下也有效？我的意思是，当您在 flex 项中具有 flex 容器、flex 项和内部 div 时 - 当您在该内部 div 上的 % 中设置高度时，它会从 flex 子项继承高度（flex 项的高度是否“设置”并不重要） "到auto)。
我认为你只需要给它一个父容器......即使该容器的高度是以百分比定义的。 这个接缝工作得很好：JSFiddle
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
}
.container {
width: 100%;
height: 50%;
}
【讨论】：
块元素的高度默认为块内容的高度。所以，给定这样的事情：
<div id="outer">
<div id="inner">
<p>Where is pancakes house?</p>
</div>
</div>
#inner 将增长到足以容纳段落，#outer 将增长到足以容纳#inner。
当您将高度或宽度指定为百分比时，这是相对于元素父级的百分比。在宽度的情况下，除非另有说明，否则所有块元素都与它们的父元素一样宽，一直到<html>；因此，块元素的宽度与其内容无关，width: 50% 会产生明确定义的像素数。
但是，块元素的高度取决于其内容，除非您指定特定高度。因此，父母和孩子之间存在关于高度的反馈，并且说height: 50% 不会产生明确定义的值，除非您通过为父元素指定特定高度来打破反馈循环。
【讨论】：
vw 单位替换百分比时要小心，因为如果您决定将元素放入另一个容器中，这会让您的生活变得非常困难。
没有内容，高度就没有价值来计算百分比。但是，如果未指定父级，则宽度将从 DOM 中获取百分比。 （使用您的示例）将第二个 div 放在第一个 div 内，将呈现结果...下面的示例...
<div id="working">
<div id="not-working"></div>
</div>
第二个 div 将是第一个 div 高度的 30%。
【讨论】：
你需要给它一个高度的容器。 width 使用视口作为默认宽度
【讨论】：