Page 1 of 1

[56K WARN] Full height scrollable designs

Posted: Thu Oct 12, 2006 4:22 pm
by Maugrim_The_Reaper
I was wondering if anyone had seen examples of designs which occupied the full dimensions of the available browser HTML space, but implemented their own scroll bars and fixed height divisions. I'm probably explaining this poorly - so I'll offer the one thing I managed to get working in both Mozilla and IE before I started breaking it...;).

http://game.patternsforphp.com/window.html

Basic premise - one can add a header and sidebar which never change position because the tab/window scrolling is disabled (html and body have 100% height and all padding/margins removed from top and bottom). I should then be able to add a second content column (the main part of the page) which uses the overflow:auto style to add scrolling bars if required.

I'm gathering it's more complicated than that though... One test saw IE6 scrolling, but the scrolled content left the division it was in and just scrolled right up into the header remaining visible under the header text. Weird stuff - but not what this topic was for...

Examples would be nice.

Thanks guys...

Posted: Thu Oct 12, 2006 5:17 pm
by Chris Corbyn
Are you trying to do this where the header and footer are fixed at the top and bottom of the page which is always the full screen?

Image

Posted: Thu Oct 12, 2006 5:30 pm
by Maugrim_The_Reaper
That's pretty much it...;). The only addition would be a side panel which I plan on containing fold-up sections.

Posted: Thu Oct 12, 2006 5:49 pm
by Chris Corbyn
That screenshot is actually one of my creations so here is the structure (XHTML 1.1 Valid) that you need.

http://w3style.co.uk/~d11wtq/page.html

I've just put all the CSS into the file in a <style> block. Sadly, it does require conditional comments since IE doesn't have real fixed positioning.

Posted: Thu Oct 12, 2006 6:04 pm
by n00b Saibot
that looks strikingly similar to an admin project I did... looks great d11.

Posted: Thu Oct 12, 2006 6:06 pm
by Maugrim_The_Reaper
Thanks a lot, d11wtq :). Much appreciated.

Posted: Thu Oct 12, 2006 6:11 pm
by Chris Corbyn
Thanks n00b. It's about a year old now; could probably do with a re-think on the DOM scripting :twisted:

No worries Maugrim; I had to do some research when I made it originally but I can't remember where I got the idea from now. It's yet another needless IE hack-around. The hack has the side-effect of making the scrollbar only touch the header and footer in IE rather than touching the top and bottom of the screen llike it does in FF/Opera etc.