Question

我的页面中有这个：

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

如果我们得到很多结果，结果面的高度会更长，有没有办法告诉搜索方（左边）根据它增长？

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

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

部分DIV的高度随着其他DIV的高度而增长

2 个答案: