CSS 中 height: 100% 为什么经常失效？从包含块到实际布局的排查思路

超哥前端记录

发布于 2026-09-21 06:59:34

1250

概述

做后台管理页面或者移动端全屏布局时，经常遇到一个看似简单却反复出问题的需求：让某个元素高度撑满父容器。写 height: 100% 后浏览器毫无反应，换成 100vh 能快点看到效果，但页面又莫名其妙出现滚动条，或者弹窗里内容一多就溢出。这个问题背后其实不是 CSS 坏了，而是百分比高度依赖包含块的高度，而包含块的高度又可能由内容决定，形成循环依赖，浏览器只能忽略百分比。下面从包含块、height

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css

CSS 中 height: 100% 为什么经常失效？从包含块到实际布局的排查思路

CSS 中 height: 100% 为什么经常失效？从包含块到实际布局的排查思路

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐