A page that doesn't scroll vertically?

[sing1ejack]

I'm just brainstorming & am wondering how difficult it would be to come up with a good design for a page that doesn't run off the bottom of the page (rough picture (http://tls.hazeljack.com/sub_static.jpg) ). That is, if i put all the content in a scrolling div and minimized the vertical space the page required, could i get everything inside the browser window nothing was ever out of sight? And could I get it to work for most users?

There are some obvious problems. I suspect the largest one is that all the toolbars from google/yahoo/your-favorite-malware eat up vertical real estate. Do you think I could get away with 475-500 vertical pixels? This survey (http://www.evolt.org/article/Real_World_Browser_Size_Stats_Part_II/20/2297/) makes it look pretty grim. I wonder how many people still have a resolution of 832 x 624 or less.

What do flash developers aim for when they design a flash site?

Then the other big question is, could i make it vertically fluid? I've never tried to gather the browser window height, but I immagine it could be done. And then I could use that value to dictate the height of the scrolling div.

The site I'm working on right now is so simple and has so little content that it strikes me as a good one with which to experiment with a design like this. Has anyone seen any similar sites, good or bad?

[Wickham]

You can use a scrolling div for the whole content in a containing div. The disadvantage is that you will see two vertical scrollbars in IE, or to be more precise, the div scrollbar and the dummy one IE always provides. You will have to give a height for the div, so choose the smallest screen resolution you think people will have, then reduce the div height for the toolbars and system tray. The div will not have much height after that, it will fit a small resolution with the extra scrollbar but it will look much too small in a large screen resolution.

Using a browser sniffer to find out the screen resolution doesn't always work. It will tell you what the viewer has set as his screen resolution and you could provide a stylesheet for a div in that height, but many people with large screen resolutions always view pages in a minimised window and it won't tell you that. Many people with 1600*1200 resolution always split the screen into two 800px wide windows and you won't know that (in this case the heights will still be the same as the screen resolution but if they minimise the height as well as the width you won't know).

You can fix the containing div to the bottom of the screen with bottom: 0; but it doesn't work in IE6. You could use the Berea Street hack which works in IE6, IE7 and Firefox (and probably others). See item 2 here:-
http://www.wickham43.supanet.com/tutorial/headerfooterfix.html and click the example
http://www.wickham43.supanet.com/tutorial/headerfooterfixexample.html
and scroll it. The header and footer are fixed and the center content scrolls. It would probably do what you want.