通过将父容器设为 display: flex，可强制子列自动等高，从而确保左右边框（如 .navs 的右边界与 .content 的左边界）完整贯穿整个容器高度，彻底解决因内容长度不一导致的边框断裂问题。
通过将父容器设为 `display: flex`，可强制子列自动等高，从而确保左右边框（如 `.navs` 的右边界与 `.content` 的左边界）完整贯穿整个容器高度，彻底解决因内容长度不一导致的边框断裂问题。
在响应式布局中（如 Foundation 的 row/column 结构），当左右两列内容高度不一致时，仅靠 border-left 或 border-right 无法实现视觉上“贯通到底”的垂直分隔线——因为边框高度默认由内容撑开，而非容器高度。根本解法是让两列在弹性布局中自动拉伸至相同高度。
只需对 .row 容器启用 Flexbox 即可：
.row {
display: flex; /* 启用 flex 布局，子项默认沿主轴（水平）排列，且 cross-axis（垂直方向）自动等高 */
}
/* 可选：重置 Foundation 默认的 float 布局干扰（若存在兼容性问题） */
.row::before,
.row::after {
display: none;
}
.navs {
border-right: 1px solid #000;
}
.content {
border-left: 1px solid #000;
}
✅ 优势说明：
- 不依赖 JavaScript 或伪元素，纯 CSS 解决；
- 兼容所有现代浏览器（包括 IE11+，需加
-ms-flexbox前缀）； - 完全适配 Foundation 的响应式类（如
medium-3/medium-9），无需修改 HTML 结构； - 因布局逻辑集中在
.row，适用于全局引入的模板文件（如你提到的 includes 文件），一次设置，全站生效。
⚠️ 注意事项：
- 若
.row上存在overflow: hidden或max-height等限制，可能影响 flex 行为，建议移除或显式设置height: auto； - Foundation 6+ 默认已支持 Flexbox Grid，但若项目仍使用旧版浮动网格，需确保
.row未被float或clear规则覆盖； - 如需在小屏幕下恢复单列堆叠（即取消等高），可结合媒体查询关闭 flex：
@media (max-width: 640px) { .row { display: block; } .navs, .content { border: none; } }
至此，无论导航栏内容多长、正文区域多短，两列始终等高，垂直边框自然延伸至容器底部，视觉统一且语义清晰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
