1

我有以下布局：（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 解决方案）。

希望得到一些指导。

4

1 回答 1

5

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;
    }

http://jsfiddle.net/ETYzR/3/

于 2012-12-17T12:25:24.267 回答