> >Ok, I'll throw it open to the CSS experts. Two divs:
> >
> ><div>Header</div>
> ><div>lots of content</div>
> >
> >The requirement is that the header div must not scroll off the page,
> >it should remain fixed at the top of the page. The content div will
> >fill with content and should be scrollable vertically when needed.
>
> That's totally possible in CSS, and it's actually possible in two
> different ways. Getting it to work in browsers, though-- that's the
> trick.
> Method one basically recreates a frame set without the frame
> markup. It goes something like this:
>
> html, body {height: 100%;}
> #header, #content {position: fixed;}
> #header {top: 0; left: 0; right: 0; height: 50px;}
> #content {top: 50px; bottom: 0; left: 0; right: 0;
> overflow: scroll;}
>
> You could, of course, replace the '50px' values with a different one,
> using any unit you like, including percentages.
> Method two nails the header to the top of the viewport, and lets
> the rest of the content scroll "underneath" it.
>
> #header {position: fixed; top: 0; left: 0; right: 0; height: 50px;}
> #content {padding-top: 50px;}
>
> Again, you're free to replace the '50px' with something else.
> The problem with both methods is IE/Win, which doesn't support
> 'fixed' on 'position', so the effect wont' be what you want. There
> are JS and behavioral solutions to fake support for 'position: fixed'
> in IE/Win, such as Dean Edwards' IE7, but I find them to be largely
> unsatisfactory because the element scrolls around and then jumps into
> place.
> An adapted approach is to have IE/Win absolutely position the
> header and just accept that it will scroll in IE/Win while remaining
> in place for all other modern browsers. That would be:
>
> #header {position: fixed; top: 0; left: 0; right: 0; height: 50px;}
> * html #header {position: absolute;} /* for IE/Win */
> #content {padding-top: 50px;}
>
> Hopefully one of those solutions will work for you.
Ahhh I take it all back - method one is exactly what I was after. I
see now why the hole is in IE not supporting fixed and not in the spec
(I was approaching the problem from the wrong end).
One point - is possible to only have the vertical scrollbar and not
the horizontal? (overflow-y in IE)
Thanks for the explanation,
andrew
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
