CSS alternative to frameset-type scroll?

Dades

Hi guys,

I'm trying to maintain a navigation bar on top of every page which remains visible even as you scroll the remaining content. This is fairly straightforward using two frames - i.e. top frame and content frame - but I'm wondering is there a way to do this using HTML/CSS only? Would prefer not to use a frameset if possible.

Also I'd rather not go down the route of using DHTML or something that visibly drags a floating DIV back up to the top when you scroll down the page.

The page content will not have a fixed height and so I'll need a scroll bar that effectively uses 100% of the browser window height save for the 50px or so I'm using for top navigation.

Cheers for any thoughts, etc.

p

Google position: fixed; which caters for all browsers except IE6 (which falls back nicely, or else us the JS hacks you're talking about just for IE6)

Teh Russ

There's two ways around this. The simplest is just to make the top menu/DIV fixed. When you define the DIV, do this:

#topdiv {
     width: 100%;
     height: 80px;
     position: fixed;
     left: 0px;
     top: 0px;
}

... so this doesn't overlap the actual content, you can put an (in this example) 80px padding or top margin on the main content.

The other way, if you want to define the top and main parts as separate DIVs is to use the CSS property "overflow: scroll" in the main DIV - this will simulate the same kind of scrolling you'd find in a frameset (ie, if the content is too long for the container, you get a scrollbar). Only problem with this one is that you'll run into the whole issue with using relative heights, which will change cross-browser.

Dades

Thanks guys - that works great. Don't know how I missed the "fixed" attribute.

As suspected in IE6 the top DIV still scrolls up, and required some browser specific attributes to get it looking okay. Although I can totally live with that since FF and later IEs look great - and lets face do we care enough about IE6 users to spend hours hacking everything?