[jQuery] How to position a footer always at bottom?

Tue, 18 Nov 2008 21:55:57 -0800 

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>

<p>Lorem ipsum dolor s.....eugiat.</p>
<p>Lorem ipsum dolor s.....eugiat.</p>
<p>Lorem ipsum dolor s.....eugiat.</p>


<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)

Reply via email to