如何均衡兄弟div高度？

Question

<div class="wrapper"> 
    <div class="sidebar-wrapper"></div> 
    <div class="content-wrapper"></div> 
</div> 

content-wrapper的高度是動態的（auto）。有沒有什麼辦法來獲得它的高度，並使用它的sidebar-wrapper，使它看起來不錯？

Answer 1

將它們顯示爲表格單元格就可以了。表格單元格可以根據內容自動調整高度，並且同一行上的所有單元格都具有相同的高度。如果您給側邊欄固定寬度（很可能），您可以輕鬆獲取內容包裝以填充剩餘空間。

無論具有最長的內容將決定高度。

.wrapper { 
 
    width: 100%; 
 
    display: table; 
 
} 
 
.sidebar-wrapper, 
 
.content-wrapper { 
 
    display: table-cell 
 
} 
 

 
.sidebar-wrapper { 
 
    width: 200px; 
 
    background-color: silver; 
 
} 
 

 
.content-wrapper { 
 
    background-color: yellow; 
 
} 
 

<div class="wrapper"> 
 
<div class="sidebar-wrapper">Here is <br>content<br>that is .....<br><br><br><br><br><br>Quite long</div> 
 
<div class="content-wrapper">Smaller content</div> 
 
</div>

Answer 2

使用height:auto;。它會自動保持高度。

Answer 3

Flexbox是@ GolezTrol的CSS表格的替代品。

.wrapper { 
 
    display: flex; 
 
} 
 
.sidebar-wrapper { 
 
    width: 200px; 
 
    background-color: silver; 
 
} 
 
.content-wrapper { 
 
    background-color: yellow; 
 
    flex: 1; 
 
}

<div class="wrapper"> 
 
    <div class="sidebar-wrapper">Here is 
 
    <br>content 
 
    <br>that is ..... 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br>Quite long</div> 
 
    <div class="content-wrapper">Smaller content</div> 
 
</div>