Occasional Sticky Footer

A sticky footer that will stay at the bottom of a page with short content but will scroll with page that has long content.

by Travis Almand

HTML

<div class='container'>
    <div class='content'>
        <h3>content</h3>
        <p>Click in here to hide/show content. The footer should stay at the bottom with less content but will be pushed downard with more content.</p>
        <p class='temp'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam porta leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean porta sem urna, at euismod sem tincidunt eu. Nulla vitae odio mollis, mollis odio non, elementum lacus. Praesent sagittis viverra malesuada. Suspendisse potenti. Quisque eu nunc rhoncus, feugiat leo quis, dictum nisi.</p>
        <p class='temp'>In convallis quam eu lorem bibendum, vitae hendrerit mi lacinia. Etiam dui nulla, posuere vulputate luctus rhoncus, placerat pellentesque nibh. Etiam imperdiet, arcu sit amet viverra lobortis, ante leo hendrerit nulla, ac porttitor turpis ante eu dolor. Etiam est dui, aliquam eu semper nec, tempor sit amet leo. Cras imperdiet nisi ut vulputate bibendum. Suspendisse et congue leo, et sagittis sem. Nulla at eros odio. Nulla metus mauris, placerat sit amet ligula a, malesuada tincidunt leo. Cras ut iaculis ante. Mauris tincidunt, dolor sed luctus pretium, nisi elit ornare sem, id gravida justo sapien a arcu. Integer tincidunt turpis quis dui congue laoreet eu ut diam. Nullam blandit erat sit amet elit mattis, iaculis imperdiet arcu tempus. Suspendisse quis sem ac metus suscipit malesuada. Duis justo lorem, sagittis non lacinia in, blandit at elit. Suspendisse nec libero vitae quam malesuada condimentum id ac velit. Duis non tellus risus.</p>
        <p class='temp'>Donec eget magna et urna pretium vestibulum. Nam eleifend odio sit amet ex tempus rhoncus. Phasellus sapien nulla, iaculis id enim vitae, blandit tincidunt libero. Vivamus quis odio ornare, hendrerit odio vitae, tristique erat. Nullam quis ligula tellus. Donec rutrum pellentesque vehicula. Nam pharetra magna ex, a placerat nulla...

CSS

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    height: 100%;
    margin-bottom: -100px;
}

.content {
    min-height: 100%;
    padding: 10px 10px 100px;
}

.footer {
    background-color: gainsboro;
    height: 100px;
    margin-top: -100px;
    padding: 10px;
}

.hide {
    display: none;
}

JavaScript

$('.container').on('click', function () {
    $(this).find('.temp').toggleClass('hide');
});