1

我有以下（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; }

我想要做的是将divs 并排排列，并让左侧栏（红色）拉伸到页面的高度，或者内容占据的高度（蓝色），无论哪个更大（如此处所示的布局）

我现在的问题是： 右容器的内容（蓝色框只是为了说明内容）与左容器没有正确对齐左容器没有根据右容器的内容调整其高度。

我已经进行了明确的修复，但老实说，我并不完全理解它是如何工作的。

希望得到一些指导。

4

3 回答 3

1

请看一下这个 jsfiddle。

很少有评论：我在 sfloat: left;上都使用过div，而且，正如巴特所说，你没有为 . 使用正确的名称clearfix。

于 2012-12-06T13:04:21.283 回答
1

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

查看更新的小提琴

对于left div不设置height，而是设置min-heigth为 100%。此外，您需要使用边距和填充来获得最后一点

于 2012-12-06T13:04:32.330 回答
1

请参阅此演示： 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需要indiv.content_wrap才能将左侧边栏拉伸到内容的高度。
position:absolute;indiv.left_container允许左容器适合包装器 div 的高度。在div.right_container那里margin-left: 220px;，左侧边栏可见

于 2012-12-06T13:07:04.077 回答