记录有关父元素flex: 1,子元素高度设置百分比不生效的问题(谷歌内核的浏览器中)

使用 navigator.userAgent.toLowerCase() 西安获取一下内核信息,查询内核版本是否处于至少处于chrome49以下

参考: https://segmentfault.com/q/1010000020919894

原因分析: 由于在低版本的谷歌内核的浏览器中若父元素是使用flex1自动占满的剩余空间则此时父元素的高度就是缺省即默认的压根就没设置高度,故而导致子元素设置百分比高度的时候因找不到父元素的高度从而导致设置的高度不生效的问题

解决方法:

  1. 升级浏览器内核
  2. 给父元素一个固定的高度
  3. 子元素不使用百分比高度而是使用固定高度

推荐使用方法1一劳永逸

### 解决方案 为了实现在 Flex 布局中,当父元素设置 `flex: 1` 时子元素能够正常滚动的效果,需确保整个 DOM 结构中的高度传递无误,并合理配置 CSS 属性。 对于 HTMLCSS 设置,应遵循以下模式: HTML 结构保持简洁: ```html <div class="container"> <div class="header"></div> <div class="content"> <!-- 子元素 --> <div class="scrollable-content"></div> </div> </div> ``` CSS 定义则要特别注意各层级之间的关系: ```css html, body { height: 100%; } .container { display: flex; flex-direction: column; height: 100vh; /* 使用视窗单位 */ } .header { /* 头部样式 */ } .content { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; /* 控制容器内的溢出行为 */ } .scrollable-content { overflow-y: auto; /* 启用垂直方向上的滚动条 */ } ``` 通过上述方式定义 `.container` 的高度浏览器窗口的高度 (`100vh`) 并应用 `display: flex` 及其方向属性来构建基础布局框架。`.content` 分区利用 `flex-grow: 1` 来填充剩余空间的同时设定自身的 `overflow:hidden` 防止内部组件影响外部表现形式。最终,在实际需要滚动的内容区域(即 `.scrollable-content`),指定 `overflow-y:auto` 让内容超过可视范围时自动显示滚动条[^4]。 此外,如果遇到更复杂的嵌套结构或者多层的 Flex 容器,则每一层都应当检查并确认是否已经正确指定了高度继承机制,防止出现因某一层未明确定义尺寸而导致的整体布局失效问题[^3]。 #### 关键点总结 - 确认最外层容器具有明确的高度(如 `height: 100%`) - 对于期望发生滚动效果的目标元素及其直接父节点均设置合适的 `overflow` 属性 - 利用 `flex-grow` 或者 `flex-shrink` 而不是简单的 `flex: 1` 来控制弹性伸缩比例,从而更好地管理不同屏幕大小下的布局适应性
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值