Make All Columns 100% of Window Height

I'm probably just having an off day and missing an easy fix, but I have a three column layout (you can view the test page here) and I'd like all three columns to fill the browser window. In practice, 99% (or maybe 100%) of the time, one of the columns will extend past the fold, so it's a matter of the other two columns extending to the same length as the longest column. This seems easy eno开发者_运维百科ugh, but I've yet to get it to work consistently throughout the site.

I'm including the CSS. If anyone wants to see the Tumblr theme markup, just let me know. It's something of a disorganized mess right now (haven't had a chance to clean it up yet), but it may still be helpful.

The offending style sheets are available right here (I apologize in advance...)

---

What you want is equal height columns.

It's actually a little more complicated than it seems.

Here's an explanation that I used which helped a lot.

Plus it works, and is clean, and is standards compliant, etc., etc.

edit

It's not so much "clean" as it gets the job done with minimal code and no hacks. There IS a new nested div for every column, but that's a fairly small price to pay for the effect.

---

if you want equal height columns use html 4.0 not xhtml if you use xhtml you will have to use javascript to make the columns equal in height. Im pretty sure cos I've come across this problem too.