如何使用css将空的浮动div拉伸到可用的全高度？

Question

我有两个浮动的div彼此相邻,并希望左边的一个伸展到正确的大小.单独使用css是否可行？

<div class="page">
    <div class="left-sidebar">
    </div>
    <div class="right-content">
    </div>
</div>

.left-sidebar
{
    background: url('ImageUrl') no-repeat right top #F8F1DB;
    float: left;
    width: 203px;
    min-height: 500px;
    height : auto;
}

.right-content
{
    background: #F8F1DB;
    margin-left: 203px;
    min-height: 477px;
}

最终看起来像这样:

-------------------
|    |            |
|    |            |
|    |            |
|    |            |
|    |            |
-------------------

左侧边框框架有一个背景图像,应该伸展到内容框架的任何高度,但是我遇到了问题.

是否有一种跨浏览器的方式使左侧边栏div仅使用css拉伸与右内容框架相同的高度？

Answer 1

我能想到的最好的就是position: absolute在.left-sidebar元素上使用:

.page {
    position: relative; /* causes the left-sidebar to position relative to this element */
}

.left-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;  /*  this line, and the one above, confer full-height */
    left: 0;
    width: 30%;
    background-color: #f90; /* adjust to taste, just to see where the element was rendered */
}

?.right-content {
    background-color: #f00; /* again, adjust to taste, was just to see where elements were rendered */
    margin: 0 0 0 35%; /* stops the sidebar showing 'above' the content, and gives a 5% gutter between */
}?

JS小提琴演示.

编辑以回应以下评论:

浮动div的两侧有一个标题和一些空格,所以我不知道要使用的实际顶部/左侧/底部位置.此外,如果正确的内容框架延伸得更长,则左侧边框框架不会随之拉伸(将高度:500px添加到小提琴的右侧内容框架中).

不幸的是,我能看到的唯一其他选择是在.left-sidebar元素中移动.right-content元素,然后以下工作.但是,对于您的用例,这可能是不可能的.

.left-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 30%;
    background-color: #f90;
}

.right-content {
    position: relative;
    background-color: #f00;
    margin: 0;
    padding: 0 0 0 35%;
}?

JS小提琴演示.