How can i make my footer stick to bottom?

Question

How can i make my footer stick to the bottom of the page with almost no content?

<footer>
<hr>
<p> &copy; 2017 Sindre Berge <p>
</footer>

http://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page — Glen Pierce, Apr 15 '17 at 19:34
See the official examples at https://getbootstrap.com/examples/sticky-footer/ and http://getbootstrap.com/examples/sticky-footer-navbar/ — Gabriele Petrioli, Apr 15 '17 at 19:35

Glen Pierce · Answer 1 · 2017-04-15T19:39:36.877

2

in CSS:

footer{
  position:fixed;
  bottom:0;
  text-align: center;
  width: 100%;
}

or you could inline it:

<footer style="position:fixed; bottom:0; text-align: center; width: 100%;">
<hr>
<p> &copy; 2017 Sindre Berge <p>
</footer>

edited Apr 15 '17 at 19:39

answered Apr 15 '17 at 19:31

Glen Pierce

4,401
5
31
50

Okey both did what i wanted but its no longer centered i had footer p { text-align: center; } – Sindre Berge Apr 15 '17 at 19:37
I've updated my answer to include the centering of the text as you had before. – Glen Pierce Apr 15 '17 at 19:39

score 0 · Answer 2 · answered Apr 15 '17 at 19:35

0

I personally like to use

footer{
  position:absolute;
  bottom:0;
  width: 99%;
}

as I've found that sometimes the site will go haywire -- especially as far as the width is concerned, as by itself I am sometimes greeted by a nasty horizontal scroll bar at the bottom, despite everything fitting onto the screen nicely.

answered Apr 15 '17 at 19:35

1

You might want to look into why your page is adding the scrollbars when you don't want it to rather than simply arbitrarily changing the width. – Glen Pierce Apr 15 '17 at 19:42
It's just pure HTML and CSS, not a single script. – Apr 15 '17 at 19:50
That doesn't surprise me, perhaps you have some margin, padding, or a border somewhere that's on an element with width at or around 100% already. – Glen Pierce Apr 15 '17 at 19:52
There is nothing left or right of the footer. There is text above but it's just plain text with some `em`s and hyperlinks. – Apr 15 '17 at 20:04

score 0 · Accepted Answer · edited May 23 '17 at 12:02

Using CSS:

<style> 
footer {
    width:100%;
    position: fixed;
    bottom: 0px;
    text-align: center; /* This line is not needed but centers your text */
    }
</style>

<footer>
    <hr>
    <p> &copy; 2017 Sindre Berge <p>
</footer>

See it in action and play with it here: https://www.w3schools.com/code/tryit.asp?filename=FEO78PICTTQP

Or try the flex solution proposed by Sam. This will not cause the footer to not always be at the bottom of the browser view but instead at the bottom of the page.

Flex solution:

.flex-container {
   display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    /*I give height 700px but can be adapted to a body being 100%*/
    height:700px;
    background:#cccccc;
    }

.flex-content {
      -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 1 100%;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
    background:#ca33aa;
    height:100px;
    }

<div class="flex-container">
  <div class="flex-content">
This is my footer
  </div>
  </div>

Do not set your z-index to 999. https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ — Glen Pierce, Apr 15 '17 at 19:40
Hi, let me edit to add the flex solution then I remove my answer. I dont mind merits but I think it completes the info for users coming after. cheers. — Sam, Apr 15 '17 at 20:07

score 0 · Answer 4 · answered Apr 15 '17 at 19:53

Block solution:

footer {
display:block;
position:fixed;
bottom:0;
}

Flex solution:

.flex-container {
   display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    /*I give height 700px but can be adapted to a body being 100%*/
    height:700px;
    background:#cccccc;
    }

.flex-content {
      -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex: 0 1 100%;
    -ms-flex: 0 1 100%;
    flex: 0 1 100%;
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
    background:#ca33aa;
    height:100px;
    }

<div class="flex-container">
  <div class="flex-content">
This is my footer
  </div>
  </div>

How can i make my footer stick to bottom?

4 Answers4