如何讓div擴展到他的兄弟分區的高度

Question

我一直在尋找一段時間，但找不到解決方案。

我有一個包含2列內容的div。

<div id="container"> 
    <div id="content1"> 
    Content1 
    </div> 

    <div id="content2"> 
    <span style="font-size: 1500px;"> Stretch height</span> 
    </div> 
</div> 

和CSS：

#container { 
    height: 100%; 
} 

#content1 { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 50%; 
    float:right; 
    background-color: pink; 
    min-height: 100%; 
    height: auto; 
} 

#content2 { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 50%; 
    float:left; 
    background-color: red; 
    min-height: 100%; 
    height: auto; 
} 

目前，＃內容1有100％的高度，同時＃內容2擴大到適合其內容。 這樣＃content1的背景顏色只出現在頂部，當向下滾動時可以看到它沒有着色。

我該如何克服這一點？ （不使用JS）

Answer 1

而不是使用min-height: 100%，您可以使用bottom: 0。當top和bottom屬性都設置爲0時，它將填滿整個高度（如果position設置爲absolute，那就是）。