这是我的CSS：
<style type="text/css">
body
{
background: #edeff8 url(sidebar.left.bg.gif) top left repeat-y;
margin: 0;
padding: 0;
/* IE 6.0 Addition */
height: 100%;
}
/* IE requires the position to be absolute otherwise the div will render below */
/* the mainContainer div on the page and not under it in the z axis */
#bg
{
position: absolute;
background-image: url(sidebar.left.bg.gif);
background-position: top left;
background-repeat: repeat-y;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-width: 960px;
/* IE 6.0 requires the -1 z-index so that the bg will render behind the scroll bar */
z-index: -1;
}
body > #bg
{
position: relative;
z-index: 1;
}
#mainContainer
{
position: relative;
min-width: 960px;
top: 0;
left: 0;
z-index: 2;
}
#header
{
background-color: #0000ac;
background-image: url(header.bg.jpg);
background-position: top;
background-repeat: repeat-x;
margin: 0;
padding: 10px;
}
#centerRightColumnContainer
{
margin: 0;
padding: 0;
float: left;
width: 100%;
}
#centerRightColumnPositioner
{
margin-left: 190px; /* To fit the left side bar */
padding: 0;
}
#sideBarLeft
{
float: left;
width: 190px; /* Total width: 190px - padding *2 = 170px; */
/*margin-left: -100%;*/
position: fixed;
height: 100%;
padding: 0;
background-color : maroon;
}
#centerColumnContainer
{
float: left;
width: 100%;
height: 100%;
position: fixed;
background-color : black;
}
#centerColumn
{
/* margin-right: 260px; */
padding: 10px;
}
/*
* ----------------------------------------------------------------------------
* NBI Layout/Design styles
*/
body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 17px;
margin: 0;
padding: 0;
}
h1, h2, h4
{
text-align: center;
color: #ffffff;
}
h1
{
font-size: 2em;
line-height: 1em;
}
h4 a, h4 a:visited
{
color: #d9dcec;
}
h4 a:hover
{
color: #ffffff;
text-decoration: none;
}
h2
{
font-size: 18px;
}
p
{
margin-top: 0px;
margin-bottom: 20px;
}
.clear_both
{
clear: both;
}
.code
{
font-family:"Courier New", Courier, monospace;
}
#w3cButtons
{
width: 196px;
margin: 20px auto;
padding: 0;
}
#markupBtn
{
margin: 0 10px 0 0;
padding: 0;
width: 88px;
float: left;
}
#cssBtn
{
margin: 0 0 0 10px;
padding: 0;
width: 88px;
float: left;
}
/* IE 6.0: For some reason, if you just specify padding here it'll add 10 px */
/* to the entire layout and cause the page to scroll horizontally. So we have */
/* to specify the width and then set a margin on it. The width is equal to */
/* the width of the column, 190px - the 10px margin * 2 */
#sideBarLeft p
{
margin: 10px auto;
width: 170px;
}
/* We need to shave off a pixel from the width of the ul. This then renders */
/* list inside this columns bg image. */
#sideBarLeft ul
{
margin: 0;
padding: 0;
border-bottom: #978e7c 1px solid;
width: 189px;
}
/* IE fix for additional padding that otherwise get's rendered between list items */
#sideBarLeft ul li
{
height: 1%;
margin: 0;
padding: 0;
list-style-type: none;
}
#rightColumnBg > #sideBarLeft
{
height: auto;
}
#sideBarLeft ul li a, #sideBarLeft ul li a:visited
{
display: block;
border-top: #978e7c 1px solid;
padding: 5px 10px;
background-image: url(sidenav.bg.gif);
background-position: bottom;
background-repeat:repeat-x;
background-color: #fffbf7;
color: #59503e;
text-decoration: none;
font-weight: bold;
}
#sideBarLeft ul li a:hover
{
color: #000000;
text-decoration: underline;
}
</style>
<!--[if IE 7]>
<style type="text/css">
/* If we are using IE 7 we must override our position attribute for our #bg div */
body > #bg
{
position: absolute;
}
</style>
<![endif]-->
这是javascript：
<script language="javascript" type="text/javascript">
function resize_bg_div(){
// This function will determine which of the three columns or the window.height
// is the largest and then set the bg div to be that height.
// This assumes that any div markup that is above our columns is wrapped
// in a single div with the id=header
var var_bg_offset = document.getElementById('header').offsetHeight;
// First we create an array and add to it the heights of each of the three columns
// and the window height
array_colHeights = new Array( );
array_colHeights.push( document.getElementById("sideBarLeft").offsetHeight );
array_colHeights.push( document.getElementById("centerColumn").offsetHeight );
// Instead of the raw window.innerHeight we need to take into account the offset size
// of our header divs
array_colHeights.push( window.innerHeight - var_bg_offset );
// Sorting our array in descending order
array_colHeights.sort( function( a, b ){ } );
// Now we'll set our bg div to the height of our largest div or window height
document.getElementById('bg').style.height = array_colHeights[0] + "px";
delete array_colHeights;
delete var_bg_offset;
}
window.onload = resize_bg_div;
window.onresize = resize_bg_div;
</script>
最后是HTML：
<div id="mainContainer">
<div id="header">
<h4>By: <a href="#" target="_blank">Ryan Chapin</a></h4>
</div>
<!-- The conainter divs for the center and the right columns -->
<div id="centerRightColumnContainer">
<div id="centerRightColumnPositioner">
<div id="centerColumnContainer">
<div id="centerColumn">
<p>If you are a practical web designer that is looking to use a fully compliant CSS layout that:</p>
</div>
<!-- centerColumn, END -->
</div>
<!-- centerColumnContainer, END -->
</div>
<!-- centerRightColumnPositioner, END -->
</div>
<!-- centerRightColumnContainer, END -->
<!-- The left column div -->
<div id="sideBarLeft">
<p>This is some sample text to go in the side bar</p>
<ul>
<li><a href="#" target="_blank">Home</a></li>
<li><a href="#" target="_blank">Open Source</a></li>
<li><a href="#" target="_blank">Contact</a></li>
</ul>
</div>
<!-- sideBarLeft, END -->
</div>
<!-- mainContainer, END -->
现在的问题是，当我调整浏览器大小并移动滚动条（y轴）时，我的标题向上移动，它会在我的其他容器上留下一个白色的div状部分。如何解决这个问题，以便当我最小化我的浏览器时，标题永远不会像那样动画。这里有一个示例Fiddle