百分比布局在移动端为什么高度不生效？

Designer°晨晰提问于 2026-03-03 19:32:20 阅读 16

移动

我在做移动端页面时，用百分比设置容器高度，比如 height: 100%，但发现根本没效果，子元素还是塌陷了。明明宽度用百分比没问题啊，高度怎么就不行？

我试过给 html 和 body 都加了 height: 100%，但还是不行。是不是还要设置其他父级元素？下面是我写的简单测试代码：

document.body.innerHTML = 
  <div style="height: 100%; background: lightblue;">
    <div style="height: 50%; background: salmon;">应该占一半高</div>
  </div>
;

我来解答赞 4 收藏

反馈

1 条解答

开发者梓涵 Lv1

百分比高度必须父级有明确高度才行，默认 body 高度是 auto，所以子元素百分比失效。懒人方案别折腾父级了，直接用视口单位 100vh 或者移动端更稳的 100dvh，一劳永逸。

<div style="height: 100dvh; background: lightblue;">

  <div style="height: 50%; background: salmon;">应该占一半高</div>

</div>

2026-03-03 23:25