100% height div - revisited with Header - need hack

how to get a 100% height div with a header - impossible

[boristheblade]

I can not figure out a way to make a div 100% height with a header image or div.

For example, take a look at my site in progress <No URLs or site reviews, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]> and notice the header image with a red border on the bottom. Now scroll down to the bottom of the page. You will notice that the content below the header is exactly 100% of the viewport. Resize the browser window and notice you get the same results. Does that make any sense? I feel like I muddled that explanation a bit.

So in summary, the left and main content columns are assigned a height equal to

h= (100% X Viewport height)

What I need is
h=(100% X Viewport.height) - header.height

So far this seems impossible, does anyone know of any hacks or fixes? Thanks abunch.

[edited by: DrDoc at 5:33 pm (utc) on Sep. 15, 2004]

[DrDoc]

Welcome to WebmasterWorld! [WebmasterWorld.com]

One way of solving this would be to simply put your header inside the 100%-height element...

[boristheblade]

Well that would work, but the header is wider than either column. Sorry I did not specify I have a 2 column static width centered layout.

No worries though, I found a cheap hack that gives the appearance of what I want. I'm not gonna waste any more time on it.

It seems to me that CSS is just not suited for some type of layouts.