Html 如何在一行中创建两个保持高度相等的容器？

不幸的是，已经回答的关于响应背景图像和等高的问题并没有解决我的问题：

我使用Bootstrap3作为网格基础。我想在一整行中使用8列容器和4列容器。在左边的容器中，我使用的背景图像应该是响应的。在正确的容器中，我希望使用background color属性而不是图像。我希望当屏幕大小改变时，两个容器始终保持相同的高度。目前，我使用的是450px的固定高度，这在逻辑上会在较小屏幕上的两个容器之间产生一个白色间隙`

你知道如何确保两个容器始终保持相同的高度而没有任何白色间隙吗

HTML

<div class="row"></div>

    <div class="col-xs-12 col-md-8" id="header_left"></div>

    <div class="col-xs-12 col-md-4" id="header_right">

        <h1 class="text-center">Ipsum Lorum</h1>

        <p class="lead text-center">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

        <p class="text-justify">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

    </div>

</div>

---

您可以尝试将高度：450px与最大高度：450px同时用于左侧和右侧的收割台。

DEMO

阴唇
Lorem ipsum door sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod temporal invidunt ut labour et dolore magna aliquyam erat，sed diam voluptua
在vero eos和accusam以及duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。他说：“我的工作是在工作中完成的，我的工作是在工作中完成的，我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的
.img全宽{宽度：100%；}
.标题包装{
背景颜色：皇家蓝；
}
#标题\右。内容{
颜色：#fff；
填充：5%；
}
#页眉右h1{页边空白顶部：0；}
@介质（最小宽度：992px）{
.标题包装{
背景颜色：皇家蓝；
显示：表格；
高度：450px；
}
#左上角{
宽度：60%；
显示：表格单元格；
背景：url（'http://placehold.it/1200x800’）50%50%不重复；
背景尺寸：封面；
}
#标题(右){
宽度：40%；
显示：表格单元格；
}
}

更改封面值：

#header_left{
  background-size: cover;
}

并为文本中心添加样式：

.text-center{
  margin-top: 0;
  padding-top: 20px;
}

---

似乎已经是这样了：如果你改变结果窗口的大小，你会发现它没有按照预期的那样工作。我在下面发布了一个非常好的解决方案。最大高度：450px应用于#header_left会使背景消失。不幸的是没有工作…你使用它的高度：450？您需要设置这两个值。请看一下isherwood的JSFIDLE：目前的情况与此完全相同。使用背景大小：cover而不是背景大小：100%auto如何？这解决了布局问题，但它会使背景图像无响应。你的解决方案是在较大分辨率下使用不可见图像，从而达到理想的视觉效果。唯一的缺点是它不适用于引导程序网格系统，即类＝“COL-XS-12 COL-MD—6 COL-LG-8”和类=“COL-XS-12 COL-MD -6 COL-LG-4”，它在中间分辨率上很好地分割中间屏幕。是的，在引导网格系统中，你不能做你想要的。它们的网格高度不相等。您可以使用flexbox来实现这一点，但这仅在IE 10+上受支持。50%的分割也很容易。非常感谢，克里斯蒂娜。回答得很好。

#header_left{
  background-size: cover;
}

.text-center{
  margin-top: 0;
  padding-top: 20px;
}