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.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
