如何让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，那就是）。