Make div stick to bottom of page

Question

So I made a contact page and I want the footer div to be sticking to the bottom of the page not right after the contact form.

But if I put everything to a container div with height:100%; and make footer bottom:0; then the page will be "too long", you have to scroll, etc...

My css so far:

#footer{
    background-color:#fff;
    font:bold 14px;
    color:#1E88E5;
    width:100%;
    height:auto;
    padding:1%;
    border-top:1px solid #1E88E5;
}

Footer is just a normal full width div with some centered text atm.

Possible duplicate of: [Make div stay at bottom of page's content all the time even when there are scrollbars](http://stackoverflow.com/questions/8824831/make-div-stay-at-bottom-of-pages-content-all-the-time-even-when-there-are-scrol) — AlexG, Aug 23 '16 at 11:06
i dont want it to be always at bottom visible,... i want it to stick to end of page, but in case the page gets "longer" you would scroll down and then see the footer — mheonyae, Aug 23 '16 at 11:43

score 68 · Answer 1 · answered Aug 23 '16 at 11:01

You can probably use position: fixed to achieve this.

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

With this you will need to offset the bottom of the page so would suggest adding a padding-bottom to .main that is the height of the footer.

.main {
  padding-bottom: 30px /*whatever the height of your footer is*/
}

score 3 · Answer 2 · answered Aug 26 '16 at 09:45

Pritesh Gupta's solution works really well for me:

I'm copy+pasting the code in case their site goes down:

Here's the HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Sticky Footer</title>
  </head>

  <body>
    <main>stuff</main>
    <footer>&copy; 2016</footer>
  </body>
</html>

Here's the CSS:

body {
  margin: 0;
}

main {
  min-height: calc(100vh - 4rem);
}

footer {
  height: 4rem;
}

I don't know if it works in old browsers but I'm not so worried about that myself.

It also depends on you knowing the height of your footer, although it's worth pointing out that you don't necessarily have to set the height manually like in the code above since you can always figure out what it is if you know how much vertical padding and line-height the contents have...

Hope this helps, I spent most of the morning trying every single sticky footer tutorial on the web before stumbling across this technique and whilst other techniques do work this one requires minimal effort.

MohammadReza Mahmoudi · Answer 3 · 2016-08-23T11:11:41.780

If you need sticky footer you can make it with 2 solutions.

Solution 1:

HTML:

<div class="wrap">
    Content
</div>
<div class="footer">
    Sticky Footer
</div>

CSS:

body, html, .wrap{
  height:100%;
}

body > .wrap{
  height:auto;
  min-height:100%;
}

.wrap:after {
  content: "";
  display: block;
  height: 100px; 
}

.footer{
  background:#662e8c;
  margin-top:-100px;
  height:100px;
  color:#fff;
  position:relative;
  line-height:180%;
  padding:0 10px;
}

Example: https://jsfiddle.net/ta1amejn/

Solution 2 (With table properties):

HTML: Content Footer

CSS:

body{
    display:table;
    width: 100%;
}

html, body{
    height:100%;
}

.main{
    height:100%;
    width:100%;
    padding-bottom:20px;
    background:#eee;
    display:table-row;
}

.footer{
    /*height:30px;*/
    line-height:30px;
    width:100%;
    background:#00f0ad;
    display:table-row;
}

Example: https://jsfiddle.net/zbtaoq1b/

If you want a fixed footer use this solution:

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

score 2 · Answer 4 · answered Aug 31 '17 at 03:10

You can do that easily with the display: flex. You don't care about height body or wrapper tag.

Example: Please change the height of main tag any value if you want, footer always sticky to bottom(not position: fixed).

https://codepen.io/tronghiep92/pen/dzwRrO

HTML markup

<div id="wrapper">
   <header>my header</header>
   <main>main content, please change height</main>
  <footer>
    my footer
  </footer>
</div>

CSS Solution

#wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  height: 100px;
  background: yellow;
}

footer {
  height: 50px;
  background: red;
  margin-top: auto; /* this is the solution */
}

main {
  height: 100px
}

Or you can:

#wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

header {
  height: 100px;
  background: yellow;
}

footer {
  height: 50px;
  background: red;
}

main {
  flex: 1;
  height: 100px;
}

Make div stick to bottom of page

4 Answers4

Linked

Related