1 reply [Last post]
pmorch
Offline
newbie
Last seen: 16 years 1 week ago
Joined: 2003-10-14
Posts: 1
Points: 0

Hi,

I'd really love to do this in CSS, but I don't really see how, unless I use Javascript.

http://morch.com/tables.html

Basically, I can't seem to be able to achieve (paraphrased): style="height: 100%-110px"

I'm just trying to keep a constant height header hugging the top of the screen and a constant height footer hugging the bottom of the screen across browser resizes even if the middle row is "veritcally short", and have scrollbars added to the entire thing, if the middle row grows (dynamic content...)

Is this possible in CSS without tables and Javascript?

In fact, I'm not able to do this with tables unless "loose.dtd" is removed from the doctype either. With loose.dtd in place the constant-height header and footer aren't constant height but resize slightly... They stay the same height if I remove the "loose.dtd" (I do set BODY { height: 100% })

Where am I going wrong here in this trivial example? It sounds so simple... Am I attempting rocket science here?

(Any pointers on why it doesn't work with the loose.dtd are welcome too!)

LisaJill
Offline
Regular
Last seen: 16 years 11 weeks ago
Joined: 2003-08-06
Posts: 43
Points: 0

Possible in CSS without tables and without javascript?

height: 800px;
overflow: auto;

apply that to the middle div and it'll give it a fixed height and a scrollbar when the content goes beyond that height..

i'm not sure if that'll mess with the rest of the positioning etc, but it may work, the problem with it is that the page wont' grow with the size of the browser, maybe it'd work with a percentage height, but I'm not sure...