CSSのdivフルハイトを与える方法

Question

私は2つの列を持つテストサイトを持っています。両方とも絶対配置です。

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

あなたが見ることができるようにそれは、スクロールバーの原因となりますので、左の列は、右の1以上のコンテンツがあります。 右の列を左の列と同じ高さにしたいので、height: 100%のCSSプロパティを付けました。

ここをスクロールすると、何が起こるかがわかります。 右の列は、ブラウザウィンドウの高さの100％に拡大され、ウェブサイト全体の高さは100％ではありません。

divを100％フルハイトにするにはどうすればよいですか？ （すでに右のdivのためbottom: 0;を試して動作しません。）

注：それは私のオリジナルWebサイト全体のレイアウトのための必要条件であるとして.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>