使用 CSS 如何使垂直边框拉伸到两列的 100% 高度

Question

我正在使用

Foundation's

row / column

布局。

// Layout

<div class="row">
  <div class="medium-3 columns navs">...</div>  <!-- nav links -->
  <div class="medium-9 columns content">...</div> <!-- page content -->
</div>


<style>
.navs {
  border-right: solid 1px #000; //black
}
.content {
  border-left: solid 1px #000; //black
}
</style>

我想要一个垂直边框来拉伸这两列的共享边框/边的长度/高度。我的问题是，虽然两列看起来具有相同的高度（容器方面），但它们的内容在长度上很少是一致的。在某些页面上，

nav links

显示的长度比

content

div 中的内容长。在某些平台上，

content

div 中的内容更长。

无论我在哪个类上设置边框样式，有些页面都会在边框底部显示间隙，因为它仅延伸到该 div 中内容的长度。

添加注释：两列的布局位于包含文件中。它不是手动添加到每个页面的。每个页面都会调用布局。

关于如何解决这个问题有什么想法吗？

谢谢，

Answer 1

只需在容器上使用 `display: flex ，默认情况下容器的高度将相同。例如

.row {display: flex;}
.row div {min-height: 100px; min-width: 100px; background: #e7e7e7;} /* for demo purposes */
.navs {
  border-right: solid 1px #000; 
}
.content {
  border-left: solid 1px #000; 
}

<div class="row">
  <div class="medium-3 columns navs">...</div>  <!-- nav links -->
  <div class="medium-9 columns content">...</div> <!-- page content -->
</div>