At 3:00 PM +0100 8/30/05, andrew welch wrote:
No need for quirks mode, I don't think. Set html,body{height:100%} (as
well as your table) and you should be good to go in standards mode.
Hmmm.... why does <html> and <body> need a height? That is surely a hack.
Or, you know... not.
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.
--
Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone
"CSS is much too interesting and elegant to be not taken seriously."
-- Martina Kosloff (http://mako4css.com/)
______________________________________________________________________
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/
