这个问题在这里已经有答案了：
百分比高度HTML5/CSS
（6个答案）
（6个答案）
五年前关闭的
为什么高度的百分比值不起作用，而宽度的百分比值起作用
例如：
<；div id=“正在工作”></部门>；
<；div id=“不工作”></部门>；
#正在工作{
宽度：80%；
高度：140像素；
背景：橙色；
}
#不起作用{
宽度：80%；
身高：30%；
背景：绿色；
}
#工作的宽度最终为视口的80%，但#不工作的高度最终为0
块元素的高度默认为块内容的高度。因此，考虑到这样的情况：
<；div id=“外部”>；
<；div id=“内部”>；
<；p>；煎饼屋在哪里？</p>；
</部门>；
</部门>；
#内部将增长到足以容纳段落的高度，#外部将增长到足以容纳#内部
将高度或宽度指定为百分比时，这是相对于图元父级的百分比。在宽度的情况下，除非另有规定，否则所有块元素的宽度与它们的父元素的宽度一样，直到<；html>；因此，块元素的宽度与其内容无关，如果说width:50%，则会产生定义良好的像素数
但是，块元素的高度取决于其内容，除非指定特定高度。因此，在涉及高度的父元素和子元素之间存在反馈，并且说height:50%不会产生定义良好的值，除非您通过给父元素一个特定的高度来打破反馈循环