Sticky footer when content is shorter than page size

Question

I've got a footer that works fine, but when the size of content in the page is shorter than the page size, the footer is rendered below the content not in the bottom of the page, here is an image:

enter image description here

Here is my code (jsbin snippet):

    .footer {
      position: absolute;
      width: 100%;
      margin-bottom: 0;
      background-color: #2D2D2D;
      height: 100px;
      text-align: center;
      color: white;
     }

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />


    </head>
    <body ng-app="AngularJSApp">
    <div class="contentBody">
         
        
        <div id="contenido"> 
            @RenderBody()
        </div>

    </div>


    <div class="footer">
       
        <p class="copyright">Copyright &copy; 2015 Diego Unanue &mdash; <a href="http://ryanfait.com/" title="3xM Web Design">3xM Web Design</a></p>
    </div>

</body>
</html>

What can I do to fix this problem, and always keep the footer in the bottom of the page?

@gp. How would you know when to have it fixed and not? I'm sure he doesn't want the footer fixed the whole time. — evolutionxbox, Apr 20 '15 at 15:06
it would be better if you could provide us your code on jsFiddle.. — Bla..., Apr 20 '15 at 15:09
position: fixed; bottom: 0 makes the footer floats over the content, hiding a part of the content — Diego Unanue, Apr 20 '15 at 15:33
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) - look at the [answer](http://stackoverflow.com/a/8825714/2365792) — Tim Rijavec, Apr 20 '15 at 15:33
possible duplicate of [CSS Sticky Footer when content does not take up entire page](http://stackoverflow.com/questions/16827100/css-sticky-footer-when-content-does-not-take-up-entire-page) — Paulie_D, Apr 20 '15 at 15:35

dippas · Accepted Answer · 2015-04-21T03:57:16.900

you can use this sticky footer:

html,
body {
  height: 100%;
  margin: 0
}
.contentBody {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -100px
}
.contentBody:after {
  content: "";
  display: block
}
.footer,
.contentBody:after {
  height: 100px
}
.footer {
  width: 100%;
  background-color: #2D2D2D;
  text-align: center;
  color: white
}

<body ng-app="AngularJSApp">
  <div class="contentBody">
    <div id="contenido">
      @RenderBody()
    </div>
  </div>
  <div class="footer">
    <p class="copyright">Copyright &copy; 2015 Diego Unanue &mdash; <a href="http://ryanfait.com/" title="3xM Web Design">3xM Web Design</a>
    </p>
  </div>
</body>

score 0 · Answer 2 · answered Apr 20 '15 at 15:32

0

Add this to your css

html, body {
  min-height: 100%;
 }

and on .footer change

margin-bottom: 0;

to

bottom: 0;

answered Apr 20 '15 at 15:32

AnnieMac

832
8
16

score 0 · Answer 3 · edited Apr 21 '15 at 08:24

0

you can use

html,body {
    position:absolute;
    bottom: 0px;
}

edited Apr 21 '15 at 08:24

Lix

47,311
12
103
131

answered Apr 21 '15 at 08:04

Alias Varghese

2,104
3
24
52

Sticky footer when content is shorter than page size

3 Answers3