CODEWITHSUNDEEP
htmlcssfooter
bonini81
bonini81

Reputation: 50

Not being to get the footer being fixed at the bottom

i am trying to fix a bug of the footer, as you can see the footer does not stay at the bottom of the browser like it should, it stays at the middle of the page if the page does not have enough content, it just follows the height of the rest of the div's. Site Example: 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 having no success. Any ideas of how solve this issue? Thanx

Upvotes: 3

Views: 64

Answers (2)

Alex Wilson
Alex Wilson

Reputation: 2419

I hope this decision will help 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;
}

Upvotes: 4

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85653

Apply changes to your 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%;
}

Upvotes: 0

Related Questions