我正在创建一个复杂的网站,其中包含大量代码。所以我创建了一个 JS Fiddle 脚本来重现我面临的问题。
简而言之,我们有一个主容器,在容器中有一个向左浮动的左栏和向右平展的主要内容栏。
正如您在示例中看到的,#sideColumn
没有扩展到覆盖 #container
的 100% 高度,因为 #mainColumn
增长。随着 #mainColumn
的增大/减小,“蓝色”应自动从顶部(如图所示)一直延伸到容器底部。换句话说,#sideColumn
应该始终等于容器的高度(自动)。
这是 Fiddle - 我做错了什么? http://jsfiddle.net/dLyfD/
最佳答案
可以这样做:
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;
}
关于html - 侧面板 div 不会随主要内容自动展开/缩小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8956337/