Height of the partial DIV to grow with the height of the other DIV

Question

I have this in my page:

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

First partial is this with some stuff in it:

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

And second partial is this with some stuff in it:

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

The results side can be longer in height if we get many results, Is there a way to tell the search side ( left one ) to grow in height according to that?

Possible duplicate of [How can I make Bootstrap columns all the same height?](http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) — tmg, May 18 '16 at 18:47

score 2 · Accepted Answer · edited May 23 '17 at 12:33

From https://stackoverflow.com/a/19091102/1192506

using display:table; and 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/

score 1 · Answer 2 · answered May 18 '16 at 18:56

Here is a modern flexbox alternative for achieving equal height columns.

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

Height of the partial DIV to grow with the height of the other DIV

2 Answers2