Question

I’ve got a test site here with two columns, both with absolute positioning.

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

As you can see, the left column has more content than the right one, so that will cause scroll bars.
Since I want the right column to get the same height as the left one, I gave it height: 100% css property.

Now scroll down and you’ll see what happens.
The right column expands to 100% of the browser window’s height and not 100% height of the whole website.

How can I give both divs 100% full height? (Already tried bottom: 0; for the right div. Won’t work.)

Note: .wrapper must stay with position: absolute as it is an requirement for my original whole website layout.

Answer 1

Use only this:

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