问题
I'm having a weird footer issue.
http://jsfiddle.net/YGAvd/
The clouds at the bottom of the page will stick to the bottom of the browser window if I expand or shrink the window. BUT when I scroll down, the footer winds up in the middle of the page. This isn't a problem on any of my other pages because they all fit in a 900x600 window before a scroll bar appears.
Is there a way to keep my footer at the bottom of the window even when I scroll (so it would always there under the content) without messing up the code for all the other pages that share the CSS document?
回答1:
In the footer CSS rule change 'position: absolute;' to 'position: fixed;'
you may also have to play with a few other def's but this works.
check it out
Here is my final footer rule
footer {
position: fixed;
color: black;
width: 100%;
height: 4.6em;
background-image: url(http://img.photobucket.com/albums/v410/justice4all_quiet/bottom_clouds.jpg);
background-repeat: repeat-x;
background-color: e0e0e0;
z-index: -999;
overflow: hidden;
bottom: 0px;
}
回答2:
Don't put the background image in the footer.... make it the body background image!
Then make your body tag look like this:
body {
line-height: 1;
overflow: auto;
background-image: url(http://img.photobucket.com/albums/v410/justice4all_quiet/bottom_clouds.jpg);
background-repeat: repeat-x;
background-position:bottom center;
background-attachment:fixed;
background-color: #b1ceff;
font: normal 95% Sathu, Verdana, Arial, Tahoma;
text-align: center;
height: 100%;
}
Don't forget to remove the code from your footer for the image. ALSO, remove the background color in the footer to avoid any issues.
来源:https://stackoverflow.com/questions/9812551/footer-at-bottom-of-browser-except-when-i-scroll