Published by Fabian on 24 Jul 2008
I am a bit frustrated.
I actually do like web page layouts that prevent scrolling of some content. Why? Because i have a 1680 resolution here and I really appreciate that some navigation stays in place. Even for small resolutions the loss of a few pixels is a gain of usability.
So far I have only seen and used two different techniques that do not use frames of any kind.
In a Div-Puzzle you use some amount of divs to fill the screen. All these divs stay in place, most likely using an absolute css positioning. There is quite likely a “content” div that will be the only one that has a visible overflow.
While this div puzzle works nice for many designs I tried so far it exposes some issues:
- Browser Quirks
There are quite a lot of hacks required to get this working correctly and place all the puzzle pieces where they should belong in all browsers.
- 100% Issue
It is even more complicated to get 100% width and/or height on all those elements where you want. Its possible, but depending on the nesting not very nice.
- Scroll Detection
While many PC browsers manage to find out that there is only one div that can be scrolled, mobile browsers hardly can deal with that. Also scrolling wheel sometimes only works when the mouse is over the main scrolling div. Also the scrollbar will mess up the design. If its not only being it ugly looking, its also of different width when its not there. iPhone uses need to double scroll to be able to scroll inside.
- Browser Quirks
In this technique, you put all your main stuff to the body element. This is good for browsers, because that is what they want to have. In addition you build some divs that contain navigation or just background images. These divs get a fixed position and a higher z-index than the body. In addition the body gets some padding so it makes sure that no content will be under the frame. This solution seems to have less downsides for me:
As the padding is required for this solution to work only rectangular window from the frame is easily possible.
- Browser Display
At least my S60 browser displays the frame initially fine. But on scrolling it has redraw issues, hiding the content which is scrolled over (but which is actually fixed on a higher z-layer)
Especially I am interested in “legal footer” solutions. I can live with the footer beeing relatively positioned to the end of the page, lets say with some 30 pixels spacing. However on larger resolutions, where the main content of the page filles only 50% of it, I still want the footer to be at the bottom of the page, as I think having the footer in the center of the screen distracts and looks ugly