Div height based on a percentage of another divs height

[edacsac]

I just thought I would pass this idea around. I have a page setup that is fixed with and internal scrolling content area, then two columns inside that area. The color contrast between the columns's backgrounds and the scrolling div background are big, so I like the columns to go all the way to the bottom od the scrolling div.

I can easily just set the div height to a static number, but now I'm adding some dynamic content in, so my original problem arises.

I haven't tried this, but the plan is on page load, load one div using auto height (or if it's too short assign it a static number, find it's length, do a little math and assign a height to the other div then load it. If javascript is disabled, then I'll give both divs a default length of 4 miles long.

Has anyone done this? I'm sure it's a bad idea and it's fixing a nit-picky problem, but it bugs me, so I need to do something about it.

[httpwebwitch]

Please don't make your divs 4 miles long. When I print your page it'll use up all my paper.

some ideas:
use a tiled background image on the scrolling div, which provides the left-right column colours. The tiled bg will do all the way down, no matter which column is longer

- OR -

do this routine:
var D = A.getHeight();
var E = B.getHeight();
var F = Math.max(D,E)
A.setHeight(F);
B.setHeight(F);

- OR -

just use a <table>