Question

我有两列。我希望较小的柱子的高度能够继承较大柱子的高度。即：左列的内容填充高度为300px，右列的内容填充高度为500px。我希望左列继承右列的高度。我尝试过几种方式，包括设置高度：自动和高度：100％，但我没有得到我想要的结果。我使用Bootstrap 3.你能指出我正确的方向吗？

 <div class='jumbotron'>
    <div class='container'>
      <div class='col-md-3 left-column'>
        <div class='row'>
          logo
        </div>
        <div class='row'>
          <ul class='nav nav-pills nav-stacked'>
            <li><a href='index.html'>Home</a></li>
          </ul>
        </div> <!-- end navigation -->
      <div class='row'>
        <p>Address</p>
        <ul>
          <li>Office: </li>
        </ul>
      </div>
      </div> <!-- end left hand column -->

      <div class='col-md-9 right-column'>
        <div clas='row'>
          <div class='col-md-7'>
            <h2>About</h2>
          </div> <!-- end about-left -->
        </div> <!-- end row -->
      </div> <!-- end right hand column -->
    </div>
  </div> <!-- end jumbotron -->


.left-column {
  border-left: 1px solid #888686;
  border-right: 1px solid #888686;
}

.right-column {
  margin-top: 20px;
  padding: 20px;
  border-left: 1px solid #888686;
  border-right: 1px solid #888686;
}

Answer 1

你可以这样做：

注意：您应该使用@media查询来避免在小屏幕上显示.left-column的额外高度。

Bootply - DEMO或Full Screen View

<强> CSS：

@media (min-width: 992px){
  .row {
    display: table;
    table-layout: fixed;
    width: 100%;
  }
  .left-column, .right-column {
    float: none;
    display: table-cell;
    vertical-align: top;
  }
}
.left-column {
  border-left: 1px solid #888686;
  border-right: 1px solid #888686;
  background:red;
}
.right-column {
  margin-top: 20px;
  padding: 20px;
  border-left: 1px solid #888686;
  border-right: 1px solid #888686;
  height: 500px;
  background:red;
}

Answer 2

您可以使用Vertical Centering Javascript

Bootstrap 3 - 如何从另一个div继承高度

2 个答案: