html - 使两个 div 响应

Question

我有两个 div 标签。一个自动调整内容的高度。另一个有固定高度(这个包含 gmaps.js 插件)。具有固定高度的那个包含谷歌地图，我必须添加高度，如果我不添加它就不会显示 map 。

我怎样才能使它们始终具有相同的高度，即使在调整窗口大小时也是如此。

JSfiddle https://jsfiddle.net/ntq3xp6b/

JS FIDDLE 中的代码

<div class="left">
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
</div>
<div class="right"></div>

CSS

.left{
    display:block;
    width:49.9%;
    float:left;
    background-color:red;
}

.right{
    display:block;
    width:49.9%;
    float:left;
    background-color:blue;
    height:300px;
}

Answer 1

将它们放在具有特定高度 的父 div 中。然后将每个 .box 的height 设置为 100%，min-height 为 300px，以确保 Google map 适合。

.parent {
  height: 400px;
}
.box {
  width: 49.9%;
  float: left;
  height: 100%;
  min-height: 300px;
}
.box.left {
  background-color: red;
}
.box.right {
  background-color: blue;
}

<div class="parent">
  <div class="left box">
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
  </div>
  <div class="right box"></div>
</div>