index.html

<div class="oh">
  <h1>Responsive Dynamic Height Sticky Footer</h1>

  <h3>Insert any amount of content</h3>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos beatae adipisci expedita nemo ad cumque consectetur ab pariatur accusamus id veniam impedit natus quo odit omnis a mollitia quidem est.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos beatae adipisci expedita nemo ad cumque consectetur ab pariatur accusamus id veniam impedit natus quo odit omnis a mollitia quidem est.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos beatae adipisci expedita nemo ad cumque consectetur ab pariatur accusamus id veniam impedit natus quo odit omnis a mollitia quidem est.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos beatae adipisci expedita nemo ad cumque consectetur ab pariatur accusamus id veniam impedit natus quo odit omnis a mollitia quidem est.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos beatae adipisci expedita nemo ad cumque consectetur ab pariatur accusamus id veniam impedit natus quo odit omnis a mollitia quidem est.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos beatae adipisci expedita nemo ad cumque consectetur ab pariatur accusamus id veniam impedit natus quo odit omnis a mollitia quidem est.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos beatae adipisci expedita nemo ad cumque consectetur ab pariatur accusamus id veniam impedit natus quo odit omnis a mollitia quidem est.
  </p>
  <p>
    <button>Click to add another paragraph</button>
  </p>
  <p>
    My final word.
  </p>
</div>

<footer class="footer">
  <h2>Insert any amount of content</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque voluptate iusto excepturi.
  </p>
  <p>
    <button>Click to add another paragraph</button>
  </p>
</footer>

Responsive-Dynamic-Height-Sticky-Footer.markdown

Responsive Dynamic Height Sticky Footer

Just a smidge of Javascript to simple HTML/CSS and voila, responsive, dynamic height, sticky footers.

Browser support: IE8+

A Pen by Cory Simmons on CodePen.

License.

script.js

var bumpIt = function() {
      $('body').css('margin-bottom', $('.footer').height());
    },
    didResize = false;

bumpIt();

$(window).resize(function() {
  didResize = true;
});
setInterval(function() {
  if(didResize) {
    didResize = false;
    bumpIt();
  }
}, 250);

$('button').click(function() {
  $(this).parent().append('<p>Another paragraph</p>');
  bumpIt();
});

style.css

html {
  position: relative;
  min-height: 100%;
}
.oh {
  overflow: hidden;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  clear: both;
}