如何在一行中创建两个响应性地保持相同高度的容器？

Question

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

我使用Bootstrap 3作为网格基础。我想在整行中使用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>

CSS

#header_left {

background: url('.../img/header_img.jpg') 0 0 no-repeat;

-moz-background-size: 100% auto;
-webkit-background-size: 100% auto;
background-size: 100% auto;
height: 450px;
}

#header_right {

background-color: green;
height: 450px;

}

Answer 1

您可以尝试使用高度：450px，最大高度：450px，用于#header_left和#header_right。

Answer 2

DEMO http://jsbin.com/aZuGORuP/1/

http://jsbin.com/aZuGORuP/1/edit?html,css,output

<div class="header-wrapper">

  <div id="header_left">
    <img src="http://placehold.it/767x400" class="img-fullwidth visible-sm visible-xs"/>
  </div>


<div id="header_right">
  <div class="content">
     <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>
</div>




.img-fullwidth {width:100%;}

.header-wrapper {
    background-color:royalblue;
 }

 #header_right .content {
   color:#fff;
   padding:5%;
 }

  #header_right h1 {margin-top:0;}

  @media (min-width:992px) { 

 .header-wrapper {
    background-color:royalblue;
    display:table;
    height:450px;
 }

#header_left {
  width: 60%;
  display:table-cell;
  background: url('http://placehold.it/1200x800') 50% 50% no-repeat;
  background-size:cover;
}

#header_right {
  width: 40%;
  display:table-cell;

 }

}

Answer 3

更改为封面值：

#header_left{
  background-size: cover;
}

并为.text-center添加样式：

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