百分比布局在移动端为什么高度不生效？
我在做移动端页面时，用百分比设置容器高度，比如 height: 100%，但发现根本没效果，子元素还是塌陷了。明明宽度用百分比没问题啊，高度怎么就不行？
我试过给 html 和 body 都加了 height: 100%，但还是不行。是不是还要设置其他父级元素？下面是我写的简单测试代码：
document.body.innerHTML =
<div style="height: 100%; background: lightblue;">
<div style="height: 50%; background: salmon;">应该占一半高</div>
</div>
;
2 条解答
你遇到的问题是因为百分比高度是相对于父元素的高度来计算的，而默认情况下，html 和 body 的高度并不是视口高度。你已经设置了 html 和 body 的高度为 100%，这是正确的，但是可能需要确保这些样式被正确应用，并且没有其他样式覆盖。
试试这个代码：
注意我加了一个