部分 DIV 的高度随其他 DIV 的高度增长答案

【问题标题】：Height of the partial DIV to grow with the height of the other DIV部分 DIV 的高度随其他 DIV 的高度增长
【发布时间】：2016-09-15 09:44:28
【问题描述】：

我的页面中有这个：

<div class="container-fluid">
    @Html.Partial("_SearchLeftSide")
    @Html.Partial("_SearchRightSide")
</div>

第一部分是这个，里面有一些东西：

<div class="col-sm-3" style="background-color: lightgray">

第二部分是这个，里面有一些东西：

<div class="col-sm-9">

如果我们得到很多结果，结果侧的高度可能会更长，有没有办法告诉搜索侧（左侧）根据那个增加高度？

【问题讨论】：

How can I make Bootstrap columns all the same height?的可能重复

标签： html css asp.net-mvc twitter-bootstrap

【解决方案1】：

来自https://stackoverflow.com/a/19091102/1192506

使用display:table; 和display:table-cell;

.container-fluid {
  display: table;
  width: 100%;
}
.container-fluid div {
  display: table-cell;
  vertical-align: top;
}
.col-sm-3 {
  background-color: lightgray;
  width: 25%;
}
.col-sm-9 {
  width: 74%;
}

<div class="container-fluid">
  <div class="col-sm-3">
    <!-- _SearchLeftSide -->
    <ul>
      <li>filter 1</li>
      <li>filter 2</li>
      <li>filter 3</li>
    </ul>
  </div>
  <div class="col-sm-9">
    <!-- _SearchRightSide -->
    <ul>
      <li>result 1</li>
      <li>result 2</li>
      <li>result 3</li>
      <li>result 4</li>
      <li>result 5</li>
      <li>result 6</li>
      <li>result 7</li>
      <li>result 8</li>
      <li>result 9</li>
    </ul>
  </div>
</div>

https://jsfiddle.net/eceL38gL/

【讨论】：

【解决方案2】：

这是实现等高列的现代flexbox 替代方案。

.container {
  display: flex;
  flex-wrap: wrap;  
}

.col:first-child {
  flex: 3;
  background: lightgray; 
}

.col:last-child {
  flex: 1;
  background: gray;
}

<div class="container">
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae repellat numquam eligendi fugiat eum voluptas minima eos corporis iste delectus reprehenderit eveniet ut adipisci quia earum deleniti recusandae rerum, aperiam.</div>
  <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta unde error, debitis eveniet reprehenderit culpa. Amet accusantium blanditiis eum rem eius fugiat recusandae quae suscipit eveniet ea, aliquam, error. Quibusdam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, molestiae. Ipsa accusantium quia iste, totam id molestiae expedita dolores delectus eum eaque reiciendis eius ipsam molestias quis dignissimos quaerat repellendus.</div>
</div>

【讨论】：