如何用CSS实现Foundation两列布局的垂直边框撑满100%高度？

针对你遇到的两列内容高度不一致导致边框无法撑满的问题，这里提供几种实用的解决方案，适配公共include布局的场景：

方案1：Flexbox 实现等高列 #

Foundation默认row基于浮动布局，改为flex布局后，子列会自动拉伸匹配最高列的高度，边框自然铺满整个高度。同时注意避免重复边框：

/* 改造row为flex布局，保留响应式换行 */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* 仅给导航列添加右侧边框 */
.navs {
  border-right: solid 1px #000;
}

/* 移除内容列的左侧边框，避免重叠 */
.content {
  border-left: none;
}

这种方式无需额外JS，纯CSS实现，且保留Foundation的响应式特性，小屏幕下列会自动堆叠。

方案2：伪元素实现独立贯穿边框 #

如果不想修改row的基础布局，可以给row添加伪元素作为共用边框，定位在两列分隔处，确保边框撑满整个row高度：

.row {
  position: relative;
  overflow: hidden;
}

/* 生成垂直边框伪元素，定位在medium-3与medium-9的分隔位置 */
.row::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 25%; /* medium-3占12列中的3列，宽度占比25% */
  width: 1px;
  background-color: #000;
}

/* 移除列本身的边框 */
.navs, .content {
  border: none;
}

/* 小屏幕下列堆叠时隐藏边框 */
@media screen and (max-width: 640px) {
  .row::after {
    display: none;
  }
}

该方案不依赖列的高度，不管内容长短，边框始终贯穿整个row，适合需要保持原有浮动布局的场景。

方案3：Foundation Equalizer 插件（需JS支持） #

如果项目已引入Foundation的JS库，可以使用Equalizer插件强制两列等高：

首先修改HTML结构，添加插件属性：

<div class="row" data-equalizer>
  <div class="medium-3 columns navs" data-equalizer-watch>...</div>
  <div class="medium-9 columns content" data-equalizer-watch>...</div>
</div>

然后调整边框样式：

.navs {
  border-right: solid 1px #000;
}
.content {
  border-left: none;
}

Equalizer会自动监听列的高度变化，将所有带data-equalizer-watch的元素设置为相同高度，确保边框铺满。

内容的提问来源于stack exchange，提问作者John Cowan