I've skimmed to the end of The Zen of CSS Design and it's not in there, so here is a demo of my position: fixed; emulation trick. It's not ready for prime time with anything beyond decorative elements, but it's been live and working since last july, so it's about time I wrote it up and asked if there were anyone who would like to help me refine it. The limitations that still need to be overcome are explained at the bottom of the page.
8 comments:
I did some extensive work on this last year and have many demonstrations on my site at http://www.s7u.co.uk
The problem of overlapping scroll bars can be overcome.
Care to elaborate on how it can be overcome? Of course you can just add a margin-right the same width as the scrollbar (an estimate at best) so that your element isn't covered by it, but then when there's no scrollbar the element is left floating into the page, not full bleed to the edge.
I like the simplicity of your solution btw (setting the body to height:100%; overflow-y:auto;) but I would be hesitant to throw out the posibility of using position:absolute anywhere in the page.
Hi, if you look at
http://www.stunicholls.myby.co.uk/layouts/body2.html
then you will see that this uses the same principle as you have suggested.
I have added a header, footer and navigation panel which avoids the scroll bar.
This one does allow position absolute within the scrolling content.
Very nice. But like I said, of course you can avoid the scroll bar with a right margin on your elements, but since this is a very design oriented technique being able to position something flush with the right of the browser and not leaving an unsightly gap where my scrollbars are narrower than yours (or you left extra room for wider scrollbars) or not leaving a really wide gap when there is no scrollbar would be ideal. Maybe since this is a hack "ideal" is too high to shoot for, but that's why I put this out there with limitations listed hoping that somebody else might have a more polished solution.
Although I still haven't found the perfect scrollbar solution (wretched things), here's an article I just ran across which has a more thorough technical explanation, and addresses the differences between IE5 and IE6:
Tagsoup Web Design, Fixing position:fixed for Windows Internet Explorer
Using IE-targeted expressions, you can position your "fixed" element to be butted up against the scrollbar (or the bottom of the page or wherever else you want). This is NOT the same as other scripting solutions and produces seamless scrolling on IE5+.
For my site, I have a right-aligned menu that's "fixed" on the page using *(for IE6):
left: expression( -menu.offsetWidth + ( ig = document.body.clientWidth) + 'px' );
and for IE5:
left: expression( -menu.offsetWidth + ( ig = IEscroll.clientWidth) + 'px' );
where IEscroll is a div that wraps the entire content area of the page. If you want to see it in action, check out my site.
Whenever anybody mentions IE expressions I cringe, but I think you're absolutely right that this is one of those cases where they can be used without the guilt, since you'd be calling them in using conditional comments. Proprietary hacks for proprietary bugs, exactly why my mentor switched us over to using conditional comments 3 years ago, long before people started flipping out about how IE7 is going to break our hacks.
Great script, Nils, thanks! I added the following code to prevent the fixed part from being printed with the rest of the page:
@media print
{
div#div1{ display:none; }
etc.
}
However, I still have two issues with the script:
- the new scrollbar is printed when printing
- it only prints 1 page although there's more content
Do you have any idea how these problems can be fixed?
Post a Comment