Question

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

非常感谢一些指导。

Answer 1

在main_container上设置position:relative。

由于左栏有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/

div元素未填充到其容器div的高度

1 个答案: