Wie gebe ich eine div volle Höhe in CSS

Question

Ich habe eine Testseite hier mit zwei Spalten, beide mit absoluter Positionierung.

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

Wie Sie sehen können, hat die linke Spalte mehr Inhalt als die rechte, so dass Bildlaufleisten verursachen. Da ich möchte, dass die rechte Spalte die gleiche Höhe wie die linke erhält, gab ich sie height: 100% CSS-Eigenschaft.

Jetzt scrollen Sie nach unten und Sie werden sehen, was passiert. Die rechte Spalte erweitert sich auf 100% der Höhe des Browserfensters und nicht auf 100% der gesamten Website.

Wie kann ich beiden Divs 100% volle Höhe geben? (Bereits versucht bottom: 0; für das Recht div wird nicht funktionieren..)

Hinweis: .wrapper muss bleiben mit position: absolute, da es eine Voraussetzung für meine ursprüngliche ganze Website-Layout ist.

Answer 1

Nur dies:

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

Answer 2

Sie brauchen nicht wirklich "Wrapper", aber wenn Sie es lassen, müssen Sie es auch 100% Höhe machen.

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

Sie können diese Tabellen erreichen. Obwohl ich realisiere, dass manche Leute Tabellen für etwas anderes als Datendarstellung verachten.

Siehe dabblet zum Beispiel: 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>