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

Question

我有两个彼此相邻的浮动div，并且希望左边的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 div与右侧内容框架只用css拉伸高度相同？

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。

---

响应编辑以下评论：

有一个头部和浮动的div两侧的一些空间，所以我不知道实际的顶部/左/底部职位使用。另外，如果正确的内容框架伸展较长，则左侧边框框架不会随之伸展（将高度：500px添加到小提琴的右侧内容框架中）。

不幸的是，我可以看到的唯一选择就是到.right-content元素中的.left-sidebar元素移动，然后将下面的作品。不过，这可能不适用于您的使用案例。

.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。

Answer 2

这是一个相当复杂的问题。 这里有一个关于它的文章： http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks