Sticky Footer using css or jquery

Question

即使滚动，如何设置div停留在浏览器屏幕的底部？

Answer 1

Say you have the following div

<div class="footer">This is at the bottom</div>

you can make it stick at the bottom of the viewport with the following CSS

.footer {
  position: fixed;
  bottom: 0;
}

It will stay there even when scrolling.

Answer 2

Use position: fixed property of the CSS attached to that div .

#footer {
    position:fixed;
    bottom:0;
}

Answer 3

Have a try at this CSS:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

CSS source: http://ryanfait.com/sticky-footer/

Answer 4

Implementation of sticky footer

Please have a look

http://css-tricks.com/snippets/jquery/jquery-sticky-footer/

Answer 5

There is an excellent footer tutorial at

http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/

The demo page is here:

http://www.lwis.net/profile/CSS/sticky-footer.html

The basic premise is that the main body page is stretched to a 100% of the page. With a min-height of 100% too.

The footer is then given the following rules:

#footer {
 clear: both;
 position: relative;
 z-index: 10;
 height: 3em;
 margin-top: -3em;
}

I got answer from this