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

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

演示 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;

 }

}