Sticky Footer

index.html

<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 a Sticky Footer.
</footer>

script.js

$("#add").on("click", function () {
  $("<p>P</p><h2>H2</h2><h1>H1</h1>").appendTo(".page-wrap");
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

sticky-footer.markdown

Sticky Footer

Content will push it down, but if there isn't enough content, it sticks to bottom

A Pen by Stan Williams on CodePen.

License.

style.css

/* Mostly: http://ryanfait.com/sticky-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;
}