css - 如何使用 css 将空的 float div 拉伸(stretch)到可用的全高？

Question

我有两个相邻的 float div，我希望左边的 div 可以拉伸(stretch)到右边的大小。这可能仅使用 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;
}

最终看起来像这样:

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

左侧边栏框架有一个背景图像，并且应该拉伸(stretch)到内容框架的任何高度，但是我在实现这一点时遇到了问题。

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

Answer 1

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

.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 Fiddle demo .

---

编辑以回应以下评论:

There is a header and some space on either side of the floating divs, so I don't know the actual top/left/bottom positions to use. Also, if the right content frame stretches longer, the left sidebar frame doesn't stretch with it (add height: 500px to the right content frame of your fiddle).

不幸的是，我能看到的唯一其他选择是将 .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 Fiddle demo .