侧面板 div 不会与主要内容一起自动扩展/缩小答案

【问题标题】：Side panel div won't expand/decrease automatically along with main content侧面板 div 不会与主要内容一起自动扩展/缩小
【发布时间】：2012-02-15 21:35:27
【问题描述】：

我正在创建一个复杂的网站，其中包含相当多的代码。所以我创建了一个 JS Fiddle 脚本来重新创建我面临的问题。

简而言之，我们有一个主容器，容器中的左列向左浮动，主内容列向右平展。

正如您在示例中看到的那样，#sideColumn 并未随着 #mainColumn 的增长而扩展到覆盖 #container 的 100% 的高度。随着#mainColumn 的增加/减少，“蓝色”应自动从顶部（如图所示）一直延伸到容器的底部。换句话说，#sideColumn 应该始终等于容器的高度（自动）。

这是小提琴 - 我做错了什么？ http://jsfiddle.net/dLyfD/

【问题讨论】：

stackoverflow.com/questions/4804581/…、stackoverflow.com/questions/384145/… 和 stackoverflow.com/questions/1122381/… 的可能重复项
没错，这个问题已经被问死了，在 SO 和其他任何地方

标签： html css

【解决方案1】：

可以这样做：

HTML：

<div id="container">
    <div id="sideColumn"></div>
    <div id="mainColumn">
        <div class="test"></div>
        <div class="test"></div>
        <div class="test"></div>      
        <div class="test"></div>    
        <div class="test"></div>    
    </div> 
</div>

CSS：

#container {
    width:500px;
    overflow:hidden;
    border:1px solid #CCC;
    position: relative;
}
#sideColumn {
    padding:20px 0;
    width:200px;
    overflow:hidden;
    background:blue;
    position: absolute;
    height: 100%;
}
#mainColumn {
    padding:20px 0;
    float:right;
    width:300px;    
    background:yellow;
}
.test {
    width:250px;
    height:50px;
    margin:15px 25px;
    background:red;
}

http://jsfiddle.net/dLyfD/1/

【讨论】：