How to place the HTML footer at the bottom of the website

A snippet demonstrating how to place an element at the bottom of the website, i.e. either at the end of the content or, if the content does not cover the entire screen, at the bottom of the viewport.

by Derija93

HTML

<div id="wrapper">
    <div id="inner-wrapper">
        <div id="header"></div>
        <div id="test">
            <p>
                This is a little test regarding footers.
                I love my footers at the bottom of the
                content or, if the content does not cover
                the screen, at the bottom of the page.
                I love this type of layout anyways since
                despite absolute numbers, it allows highly
                flexible content space. So this is my
                solution.
            </p>
            <p>
                The colors represent important areas of a
                website:
                <table>
                    <tr>
                        <td>Red</td>
                        <td>Header</td>
                    </tr>
                    <tr>
                        <td>Yellow</td>
                        <td>Content</td>
                    </tr>
                    <tr>
                        <td>Green</td>
                        <td>Background</td>
                    </tr>
                    <tr>
                        <td>Blue</td>
                        <td>Footer</td>
                    </tr>
                </table>
                Play around with the height of the content
                div and you'll notice how the blue div stays
                where it's supposed to be while the yellow
                div can change it's height to whatever value.
            </p>
            Height of yellow element in PX:
            <input type="number" id="setHeight" />
        </div>
        <div id="footer"></div>
    </div>
</div>

CSS

#wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: green;
}

#inner-wrapper {
    position: relative;
    width: 100%;
    min-height: 100%;
}

#header {
    width: 100%;
    height: 60px;
    background-color: red;
}

#test {
    position: relative;
    width: 100%;
    height: 640px;
    background-color: yellow;
}

#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 20px;
    background-color: blue;
}

JavaScript

$("#setHeight").change(function () {
    $("#test").height($(this).val());
});