如何使用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