stretch div to bottom of page

[kindari]

Hi, I'm working on my first site over at kindari.net (http://kindari.net/). I would like the blue area to stretch to the bottom of the page. I can achieve this by adding height: 100%; to the .content class, but then it creates too much content, adding a scroll bar when there need not be. anyone know of a fix for this?

[Dave Lane]

You could create a table which contains everything else on your page. Ensure that all of the row heights sum up to 100% height, and you should get the desired result. If you still need a .content DIV, you could stick it inside a table row and give the DIV 100% height (100% of the containing table row height).

I'm sure there's a cleaner way to do this with CSS, but I'm not aware of it.

[mordauk]

So are you wanting one continuous blue box that stretches the whole length of the page, rather than just a blue background around each paragraph?

[Sprax]

http://www.webdeveloper.com/forum/showpost.php?p=1042554&postcount=2

Seems right no?

Possibly add a footer to the bottom of the page to get the background.

[rnd me]

You could create a table which contains everything else on your page. Ensure that all of the row heights sum up to 100% height, and you should get the desired result. If you still need a .content DIV, you could stick it inside a table row and give the DIV 100% height (100% of the containing table row height).

I'm sure there's a cleaner way to do this with CSS, but I'm not aware of it.

No!!!!!!!!

don't use a table, tables are for data, not layout.
Tables are really bad for a lot of reasons.
They negatively affect maintenance, accessibility, performance, and semantics...

use css to control your layout, that's what it's for...