Sticky Footer using css or jquery

Question

How can I set a div stay at the bottom of the browser screen even when scrolling?

@Pranav I see your Google search and raise you a site search: http://stackoverflow.com/search?q=sticky+footer+css 759 questions. A dupe of a dupe of a dupe. — ЯegDwight, Dec 13 '12 at 13:44
Possible duplicate of [CSS, sticky footer](http://stackoverflow.com/questions/10465250/css-sticky-footer), [Sticky Footer CSS](http://stackoverflow.com/questions/5822825/sticky-footer-css), and the dozens of questions linked from these. — ЯegDwight, Dec 13 '12 at 13:46
possible duplicate of [CSS to make HTML page footer stay at bottom of the page with a minimum height](http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height) — Liam, Jul 23 '13 at 09:33

score 6 · Answer 1 · answered Dec 13 '12 at 10:59

6

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.

answered Dec 13 '12 at 10:59

Robusto

31,447
8
56
77

score 4 · Accepted Answer · edited Mar 03 '13 at 15:06

4

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

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

edited Mar 03 '13 at 15:06

JSuar

21,056
4
39
83

answered Dec 13 '12 at 11:02

Sovan

104
3

score 1 · Answer 3 · edited Dec 13 '12 at 13:48

1

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/

edited Dec 13 '12 at 13:48

ЯegDwight

24,821
10
45
52

answered Dec 13 '12 at 11:00

Shiridish

4,942
5
33
64

score 0 · Answer 4 · answered Dec 13 '12 at 11:00

0

Implementation of sticky footer

Please have a look

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

answered Dec 13 '12 at 11:00

Soarabh

2,910
9
39
57

score 0 · Answer 5 · edited May 23 '17 at 11:55

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

Sticky Footer using css or jquery

5 Answers5