Clever Geek Handbook

No need for the footer to stick to the bottom

I am trying to fix the footer error, as you can see that the footer does not stay at the bottom of the browser as it should, it stays in the middle of the page, if there is not enough content on the page, it just follows the height of the rest of the div. Sample site: http://produccion.pugle.net/sarahbcn2/membership-cancelled/

So I tried to fix it with some css commands on the main div wrapper like overflow: auto; or height: auto; and the same commands for the footer, but no success. Any ideas on how to resolve this issue? Thanx

+3


source to share


2 answers


I hope this solution helps you DEMO Sticky Footer



<div class="page-wrap">

  <h1>Sticky Footer</h1>
  <h2>with Fixed Footer Height</h2>

  <button id="add">Add Content</button>  

</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>


* {
    margin: 0;
}
html, body {
    height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
    margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
    height: 142px; 
}
.site-footer {
  background: orange;
}
+4


source


Apply changes to footer (use fixed position):



footer {
    background: none repeat scroll 0 center #fff;
    bottom: 0;
    display: block;
    margin: 0 auto;
    padding: 80px 0 0;
    position: fixed;/*fixed position*/
    width: 100%;
}
0


source






More articles:


All Articles