Equally tall CSS 'columns'

[ktinkel]

Does anyone know any useful method for controlling the height of all the columns on a web page?

What if you want to have vertical borders (or a panel of color, occasionally) fill all the columns on a web page to the same depth? The only solutions I can find are kludgey at best.

I have been setting height on the DIV for each column. Since pages vary in depth, this means using either inline or internal CSS for that, and it is inelegant and very likely to produce a minorly embarrassing mess with text overrunning one of the columns.

And I have seen one trick on A List Apart (in “Faux Columns” by Dan Cederholm): Use a background image of defined height. Same problems, by and large — have to set the height on a page-by-page basis. Ick.

Are these the only options we have? Seems to be, but figured one of you here might have another idea.