我有以下布局：（jsfiddle）
<!DOCTYPE HTML>
<html>
<body>
<div class="main_container">
<div class="left_container">
</div>
<div class="right_container">
</div>
</div>
</body>
</html>?
CSS：
div.main_container {
background: #000;
border: none;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
width: 100%;
min-height: 400px;
margin: auto;
}
div.left_container {
float:left;
position:absolute;
width: 220px;
background: red;
margin: 0;
min-height: 100%;
padding: 0;
}
div.right_container {
position: relative;
margin-left: 220px;
width: 715px;
height: 100px;
background: blue;
}
我似乎无法让左侧（红色）容器填充主容器的高度，其中右侧容器的内容有可能增加主容器的高度（非 jQuery 解决方案）。
希望得到一些指导。
position:relative在 main_container 上设置。
由于左列height:100%的高度与其父列的高度相同。在之前的代码中，这个元素的父元素是文档，因为它有position:absolute. 添加position:relative到容器会使其成为左列的父列，从而导致列的高度调整为其父列的高度。
div.main_container {
background: #000;
border: none;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
border-radius: 15px;
width: 100%;
min-height: 400px;
margin: auto;
position: relative;
}