How do you create non scrolling div that looks like the MS Office 2007 ribbon on a web page without two sets of scroll bars. One for the window and one for the div.
views:
7076answers:
5
+3
Q:
How do you create non scrolling div at the top of an HTML page without two sets of scroll bars
A:
Use an fixed position element, that has 100% width and a high Z-INDEX.
You'll also want to ensure that that the start of your scrolling content isn't obscured by the fixed , until you start scrolling down, by putting this in another and positioning this appropriately.
<BODY>
<DIV style="position: fixed; top: 0px; width:100%; height: 100px;">
HEader content goes here
</DIV>
<DIV style="margin-top: 100px;">
Main content goes here
</DIV>
</BODY>
Note the the height of the first , and the top margin of the second, will need to be adjusted to suit your needs.
P.S. This doesn't work in IE7, for some reason, but it's a good starting point, and I'm sure that you can work out some variation on this theme, that works in the way that you want it to.
belugabob
2008-11-02 12:14:24
note that this won't work in IE6, and only in IE7 in Strict mode.
nickf
2008-11-02 12:24:47
Yes - just found that out the hard way - aren't browser incompatibilities a pain. Probably need to check out the markup for StackOverflow, as this does something similar to display the notifications about your profile.
belugabob
2008-11-02 12:30:09
A:
Nikola Stjelja
2008-11-02 12:52:16
A:
Belugabob has the right idea that what you are trying to do is fixed positioning, which IE 6 does not support.
I modified an example from the bottom of this tutorial which should do what you want and support IE 6+ in addition to all the good browsers. It works because IE lets you put Javascript in style declarations:
<style type="text/css">
div#fixme {
width: 100%; /* For all browsers */
}
body > div#fixme {
position: fixed; /* For good browsers */
}
</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#fixme {
/* IE5.5+/Win - this is more specific than the IE 5.0 version */
right: auto; bottom: auto;
left: expression( ( 0 - fixme.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 - fixme.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
</style>
<![endif]>
<![endif]-->
<body>
<div id="fixme"> ...
joelhardi
2008-11-03 11:40:11
+1
A:
Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fixed Header/Full Page Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body,
div {
margin: 0;
padding: 0;
}
body {
/* Disable scrollbars and ensure that the body fills the window */
overflow: hidden;
width: 100%;
height: 100%;
}
#header {
/* Provide scrollbars if needed and fix the header dimensions */
overflow: auto;
position: absolute;
width: 100%;
height: 200px;
}
#main {
/* Provide scrollbars if needed, position below header, and derive height from top/bottom */
overflow: auto;
position: absolute;
width: 100%;
top: 200px;
bottom: 0;
}
</style>
</head>
<body>
<div id="header">HEADER</div>
<div id="main">
<p>FIRST</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>LAST</p>
</div>
<!--[if lt IE 7]>
<script type="text/javascript">
var elMain = document.getElementById('main');
setMainDims();
document.body.onresize = setMainDims;
function setMainDims() {
elMain.style.height = (document.body.clientHeight - 200) + 'px';
elMain.style.width = '99%'
setTimeout("elMain.style.width = '100%'", 0);
}
</script>
<![endif]-->
</body>
</html>
Basically, what you are doing is removing the scrollbars from the body and applying scrollbars to elements inside the document. That is simple. The trick is to get the #main div to size to fill the space below the header. This is accomplished in most browsers by setting both the top and the bottom positions and leaving the height unset. The result is that the top of the div is fixed below the header and the bottom of the div will always stretch to the bottom of the screen.
Of course there is always IE6 there to make sure that we earn our paychecks. Prior to version 7 IE wouldn't derive dimensions from conflicting absolute positions. Some people use IE's css expressions to solve this problem for IE6, but these expressions literally evaluate on every mousemove, so I'm simply resizing the #main div on the resize event and hiding that block of javascript from other browsers using a conditional comment.
The lines setting the width to 99% and the setTimeout to set it back to 100% fixes a little rendering oddity in IE6 that causes the horizontal scrollbar to appear occasionally when you resize the window.
Note: You must use a doctype and get IE out of quirks mode.
Prestaul
2008-11-03 15:20:45
+2
A:
I will probably be bashed by CSS purists here, but using a table with 100% width and height works in any browser, and does not require browser-specific CSS hacks.
Filini
2008-11-04 09:03:56