[56K WARN] Full height scrollable designs

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Maugrim_The_Reaper
DevNet Master
Posts: 2704
Joined: Tue Nov 02, 2004 5:43 am
Location: Ireland

[56K WARN] Full height scrollable designs

Post 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...
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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
User avatar
Maugrim_The_Reaper
DevNet Master
Posts: 2704
Joined: Tue Nov 02, 2004 5:43 am
Location: Ireland

Post 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.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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.
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

that looks strikingly similar to an admin project I did... looks great d11.
User avatar
Maugrim_The_Reaper
DevNet Master
Posts: 2704
Joined: Tue Nov 02, 2004 5:43 am
Location: Ireland

Post by Maugrim_The_Reaper »

Thanks a lot, d11wtq :). Much appreciated.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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.
Post Reply