CSS Flex 布局：实现左右等高布局
在使用 CSS Flex 布局时，常需将页面分割成上下两部分，下半部分又细分为左右两列。 如何确保左右两列高度一致，并添加贯穿始终的分割线？本文提供两种方案。
方案一：基于现有结构，使用 JavaScript 动态调整高度
假设已存在 .lft 和 .rht 两个容器，可以使用 JavaScript 动态获取 .rht 的高度，并应用到 .lft 上。这种方法简单直接，但依赖 JavaScript，且效率可能较低。
首先，为 .rht 设置 height: min-content;，使其高度由内容撑开。然后，使用 JavaScript 代码：
let h = $(".rht").height() + 'px';$(".lft").css({ height: h });
此代码片段获取 .rht 的高度，并将其应用到 .lft。
立即学习“前端免费学习笔记（深入）”；
方案二：优化 HTML 结构，利用 CSS Flex 实现等高
为了避免 JavaScript 的依赖，并提升效率，建议优化 HTML 结构，并利用 CSS Flex 的特性来实现等高布局。
Otter.ai
一个自动的会议记录和笔记工具，会议内容生成和实时转录
91 查看详情
示例 HTML 结构：
导航栏左侧内容右侧内容
对应的 CSS 代码：
.wrapper { display: flex; flex-direction: column; /* 垂直布局 */ height: 100vh; /* 占据整个视口高度 */}.top { height: 100px; /* 顶部导航高度 */ width: 100%; background-color: #e3e3e3;}.content { display: flex; flex: 1; /* 占据剩余空间 */}.lft { flex: 1; /* 占据剩余空间 */}.rht { width: 600px; flex-shrink: 0; /* 防止右侧内容压缩 */ border-left: 1px solid red; /* 分割线 */}
这种方法中，wrapper 使用 flex 布局，content 容器也使用 flex 布局，并通过 flex: 1; 确保左右两列共享剩余空间，从而达到等高效果。 flex-shrink: 0; 防止 .rht 被压缩。
通过以上两种方法，可以有效解决 CSS Flex 布局中左右两列高度不一致的问题，并实现简洁美观的页面布局。 建议优先考虑方案二，因为它更简洁、高效且不依赖 JavaScript。
以上就是如何使用 CSS Flex 实现左右布局并保持相同高度？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1115312.html
微信扫一扫 
支付宝扫一扫 
