[jQuery] How to position a footer always at bottom?
Consider the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var footer = $('#footer');
var w = ( $(window).width() - footer.width() ) / 2;
footer.css('left', w);
footer.css('display', 'block');
$(window).scroll(function(){
console.debug( $(window).height() );
footer.css('bottom', 0);
});
});
</script>
<style>
#footer{
background-color:green;
height:30px;
position:absolute;
width:800px;
bottom:0;
display:none;
}
</style>
</head>
<body>
Lorem ipsum dolor s.....eugiat.
Lorem ipsum dolor s.....eugiat.
Lorem ipsum dolor s.....eugiat.
<div id="footer">Footer</div>
</body>
</html>
I want to footer always at the bottom, no matter I scoll the page.
(while resize I don't care)