身高偏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>