如何在CSS中給出div全高

Question

我有一個測試網站，這裏有兩列，都是絕對定位。

http://dl.dropbox.com/u/17844821/zeug/heighttest.html

正如你可以看到，左邊的列比右邊多了一個內容，所以這將導致滾動條。 因爲我想要右欄獲得與左欄相同的高度，所以我給了它height: 100% css屬性。

現在向下滾動，你會看到會發生什麼。 右列擴展至瀏覽器窗口高度的100％，而不是整個網站的100％高度。

我該如何給兩個div 100％的全高？ （已經嘗試過bottom: 0;爲正確的格將無法工作。）

注： .wrapper 必須留position: absolute，因爲它是我原來整個網站佈局的要求。

Answer 1

只能使用這樣的：

body { overflow:auto; margin:0; } 
.wrapper { display:table; width:100%; } 
.left, .right { display:table-cell; width:50%; } 

Answer 2

你並不是真的需要「包裝」，但如果你把它放在裏面，你也需要把它做成100％的高度。

html, body{ 
    height: 100%; 
} 

body{ 
    overflow: hidden; 
} 

.red{ 
    background: red; 
} 

.blue{ 
    background: blue; 
} 

.wrapper{ 
height:100% 
} 

.left{ 
    float: left; 
    width: 50%; 
    height:100%; 
} 

.right{ 
    float: right; 
    height: 100%; 
    width: 50%; 
} 

Answer 3

您可以使用表格實現這一目標。雖然我意識到有些人不喜歡數據表示以外的任何表格。

例如見dabblet： http://dabblet.com/gist/2238394

CSS

.red{ 
    background: red; 
} 

.blue{ 
    background: blue; 
} 

.wrapper{ 
    overflow: auto; 
    width:100%; 
} 
td{ 
    vertical-align:top; 
} 

HTML

<table class="wrapper"> 
    <tr> 
     <td class="red"> 
      foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo 
     </td> 
     <td class="blue"> 
      foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo<br>bar<br>foo<br>foo 
     </td> 
    </tr> 
</table>