Fixing the footer to the bottom of the browser

Is there any way we can fix the footer to the bottom of the window 开发者_如何转开发even at the time of vertical scroll. I have gone through some examples, but those never work with the vertical scroll.

Check out the sample and its google code base

You can set the bottom property to 0. Example:

.footer
{
    background-color:#FFFACD;
    bottom:0;
    position:fixed;
    z-index:250px; 
}

Here is your css

html, body {height:100%;padding:0;margin:0;}
#footer {position:absolute;bottom:0;left:0;width:100%;background-color:#f00;}
#scrollingbody {overflow:auto;height:100%;}

Here is your html

<div id="scrollingbody">content goes here</div>
<div id="footer">here is footer</div>