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

Designer°晨晰 阅读 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 条解答
开发者梓涵
百分比高度必须父级有明确高度才行,默认 body 高度是 auto,所以子元素百分比失效。懒人方案别折腾父级了,直接用视口单位 100vh 或者移动端更稳的 100dvh,一劳永逸。

<div style="height: 100dvh; background: lightblue;">
<div style="height: 50%; background: salmon;">应该占一半高</div>
</div>
点赞 3
2026-03-03 23:25