在响应式双列布局中，当左右列内容高度不一致时，单纯为某一列设置 border-right 或 border-left 会导致边框无法撑满整个容器高度。本文介绍通过 Flexbox 实现两列等高并使垂直边框自动拉伸至父容器全高的可靠方案。
在响应式双列布局中，当左右列内容高度不一致时，单纯为某一列设置 `border-right` 或 `border-left` 会导致边框无法撑满整个容器高度。本文介绍通过 flexbox 实现两列等高并使垂直边框自动拉伸至父容器全高的可靠方案。
要让两列之间的垂直边框（如导航栏右侧边框与内容区左侧边框）始终延伸至整个 .row 容器的高度，关键在于确保两个子列在视觉上等高——而非依赖各自内容的实际高度。Foundation 默认使用浮动（float）或 Grid 布局，其子元素高度由内容决定，无法自动对齐底部，因此边框会“断开”。
最简洁、语义清晰且浏览器兼容性良好的解决方案是：将 .row 设为 Flex 容器。Flexbox 的默认行为（align-items: stretch）会强制所有子项（即 .navs 和 .content）拉伸至容器最大高度，从而让双边框自然贯通到底。
以下是推荐实现代码：
.row {
display: flex; /* 启用 Flex 布局，子项自动等高 */
}
/* 可选：重置 Foundation 浮动类可能带来的干扰（如必要） */
.row .columns {
float: none;
margin: 0;
}
.navs {
border-right: 1px solid #000;
}
.content {
border-left: 1px solid #000;
}
<div class="row"> <div class="medium-3 columns navs">导航链接列表...</div> <div class="medium-9 columns content">正文内容区域...</div> </div>
✅ 优势说明：
- 无需 JavaScript，纯 CSS 驱动；
- 兼容所有现代浏览器（包括 IE11+，需添加
-ms-flexbox前缀以支持旧版 IE）； - 完全适配 Foundation 的响应式类（如
medium-3/medium-9），不影响断点行为； - 因为
.row是包含组件（通过 include 引入），此样式只需全局定义一次，即可统一生效于所有页面。
⚠️ 注意事项：
- 若项目中
.row已被其他样式（如overflow: hidden、position: relative等）影响 Flex 行为，请检查层叠优先级，必要时提高选择器特异性（如.row.flex-row）； - 若需在小屏幕下退化为单列堆叠，可配合媒体查询关闭 Flex：
@media screen and (max-width: 640px) { .row { display: block; } .navs, .content { border: none; } }
总结：告别 min-height 修补、padding-bottom + margin-bottom 技巧或伪元素模拟，Flexbox 提供了语义正确、维护成本低、一次配置全局生效的标准解法——让垂直边框真正“随容器呼吸”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
