<div class="content">
  <h1>Sticky Footer without extra markup</h1>
  <p>Not a great solution because the height of the footer is a "magic number".</p>
  <p class="paragraph"><button id="add">Add Content</button></p>
</div>

<footer class="footer">
  Footer 
</footer>
html,
body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
  padding: 2em 2em 6em; /* 70px = footer height + expected padding */
  margin-bottom: -4em;  /* brings the footer into the padding gap */
}
.footer {
  height: 4em;
}










* {
  box-sizing: border-box;
}
body {
  font: 16px Sans-Serif;
}
h1 {
  margin: 0 0 20px 0;
}
p {
  margin: 20px 0 0 0;
}
footer {
  background: #42A5F5;
  color: white;
  line-height: 50px;
  padding: 0 20px;
}
// Not required!
// This is just to demo functionality.

$("#add").on("click", function() {
  $("<p>Pellentesque habitant morbi tristique<br>senectus et netus et malesuada<br> fames ac turpis egestas. <br>Vestibulum tortor quam, <br>feugiat vitae, <br>ultricies eget,<br> tempor sit amet, <br>ante.<br> Donec eu libero sit amet <br>quam egestas semper. <br>Aenean ultricies mi vitae est.<br> Mauris placerat<br> eleifend leo.</p>").insertAfter(".paragraph");
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js