Question

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

即使调整窗口大小，我怎么能让它们始终具有相同的高度。

来自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

将它们放在具有特定height的父div中。然后将每个height的{{1}}设置为100％，.box为300px，以确保Google地图适合。

min-height

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

Answer 2

也许还会添加顶部和底部填充？

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

我建议你试试jQuery matchHeight -plugin。

 $(function() {
    $('.box').matchHeight();
});

它将给出最高的盒子固定高度。调整窗口大小时，高度值将更新。

使两个div响应

3 个答案: