身高偏DIV与其他DIV

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

如果我们得到很多结果，结果侧可以更高的高度，有没有一种方法可以tel搜索方（左边）根据那个高度增长？

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>