Sticky footer

Stick footer, which stays at the bottom of the page unless there is content to push it away.

by godfrzero

HTML

<div class="wrapper">
    <button id="add-content">Add more content</button>
    <ul class="content">
        <li>I am content, destroyer of worlds</li>
        <li>I am content, destroyer of worlds</li>
        <li>I am content, destroyer of worlds</li>
        <li>I am content, destroyer of worlds</li>
        <li>I am content, destroyer of worlds</li>
    </ul>
    <footer>
        Footer!
    </footer>
</div>

CSS

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

.wrapper {
    min-height: 100%;
    position: relative;
    box-sizing: border-box;
    padding-bottom: 100px;
}

footer {
    height: 100px;
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    width: 100%;
    bottom: 0;
}

/* Ignore this, this is just here because of my padding/margin OCD :P */
button {
    margin: 20px;
}

JavaScript

// Ignore all this, this is only here to get the 'append content' button working. It's not actually part of the footer demo. ^_^

var $content = $('.content'),
    $wrapper = $('.wrapper'),
    $addContentButton = $('#add-content');

$addContentButton.on('click', function() {
	$content.clone().appendTo( $wrapper );
});