Question

使用 Bootstrap 3.0.2 。想要将div拉伸到它的父div的高度。不想用脚本设置。有没有办法这样做？请看小提琴。在这里，我想将蓝色容器拉伸到父绿色容器的高度。

<div class="row border-green">
    <div class="col-xs-6">
        <div class="border-red">
            aaaa<br>
            bbbb<br>
            cccc
        </div>
        <div class="border-red">
            dddd
        </div>
    </div>
    <div class="col-xs-6 border-blue">
        eeee<br>
        ffff<br>
    </div>
</div>

Answer 1

为您的父div提供课程：equal-height

将此添加到您的CSS：

.equal-height {
    display: table;
}
.equal-height > div {
    display: table-cell;
    float: none;
    vertical-align: top;
}

http://jsfiddle.net/jpes2wry/3/

Answer 2

Flexible box解决方案适用于您的问题。将display: flex添加到父元素。

对于当前读者，兼容性表：Can I use Flexbox

对于未来的读者，灵活的盒子是要走的路！

.border-red {
  border-style: solid;
  border-width: 2px;
  border-color: #FF0000;
}
.border-blue {
  border-style: solid;
  border-width: 2px;
  border-color: #2E2EB8;
}
.border-green {
  border-style: solid;
  border-width: 2px;
  border-color: #00CC00;
}
.equal-height {
  display: flex;
  display: -ms-flex;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row border-green equal-height">
  <div class="col-xs-6">
    <div class="border-red">
      aaaa
      <br>bbbb
      <br>cccc
    </div>
    <div class="border-red">
      dddd
    </div>
  </div>
  <div class="col-xs-6 border-blue">
    eeee
    <br>ffff
    <br>
  </div>
</div>

Answer 3

我只是为您的代码添加高度并且它有效，只需尝试：

.border-red {
   border-style: solid;
   border-width: 2px;
   border-color: #FF0000;
 }
.border-blue {
   border-style: solid;
   border-width: 2px;
   border-color: #2E2EB8;
   height: 100%;
}
.border-green{
   border-style: solid;
   border-width: 2px;
   border-color: #00CC00;
   height: 100px;
 }

如何将div放在它的父div的高度

3 个答案: