Question

我有以下（jsfiddle）：

<div class="content_wrap">
    <div class="left_container">
    </div>

    <div class="right_container">
        <div style="background-color: blue; margin:20px; height: 1500px;"></div>
    </div>

    <div class="clearfix"></div>
</div>

</body>
</html>

CSS：

body,html {
    height: 100%;
    width: 100%;
    background-color: #f8f8f8;
}

div.content_wrap {
    width: 100%;
    height: 100%;
}

div.left_container {
    float:left;
    width: 220px;
    height: 100%;
    background-color: red;
}

div.right_container {
    position: relative;
    padding: 15px;
    padding-top: 100px;
    width: 1000px;
}

.clear { clear: both; }

我要做的是将div并排排列，并将左侧栏（红色）拉伸到页面的高度或内容占用的高度（这是蓝色的），它更大（如显示here的布局）

我目前的问题是：右侧容器的内容（蓝色框仅用于说明内容）在左侧容器旁边没有正确对齐左侧容器不会根据右侧容器的内容调整其高度。

我已经提出了明确的解决方案，虽然说实话，我并不完全理解这是如何运作的。

非常感谢一些指导。

Answer 1

请查看this jsfiddle。

如此少的评论：我在float: left;上使用了div，而且正如bart所说，你没有使用clearfix的正确名称。

Answer 2

首先，您应该嵌套div，以便left div能够与正确的一起成长。

See updated fiddle

left div未设置height，min-heigth设置为100％。此外，你需要使用边距和填充来获得最后一点好的

Answer 3

查看此演示：http://jsfiddle.net/PaJ3r/9/ 这是更新的CSS：

body,html {
    height: 100%;
    width: 100%;
    background-color: #f8f8f8;
}

div.content_wrap {
    width: 100%;
    position: relative;
}

div.left_container {
    float:left;
    position:absolute;
    width: 220px;
    height: 100%;
    background-color: red;
}

div.right_container {
    position: relative;
    padding: 15px;
    margin-left: 220px;
    padding-top:100px;
    width: 1000px;
}

.clear { clear: both; }

需要position:relative中的{p> div.content_wrap才能使左侧边栏拉伸到内容的高度。
position:absolute;中的div.left_container允许左侧容器适合包装div的高度。在div.right_container margin-left: 220px;，左边栏可见

不能让我的divs并排排列并填满页面的高度

3 个答案: