Sticky Footer Example

See http://stackoverflow.com/q/21494406/1959975

by Nicholas Braden

HTML

<!-- see http://stackoverflow.com/q/21494406/1959975 -->
<main>
    <p>This is the content. Resize the viewport vertically to see how the footer behaves.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
</main>
<footer>
    <p>This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.</p>
    <p>This is the footer.</p>
</footer>

CSS

*
{
    /* personal preference */
    margin: 0;
    padding: 0;
}
html
{
    /* make sure we use up the whole viewport */
    width: 100%;
    height: 100%;
    /* for debugging, a red background lets us see any seams */
    background-color: red;
}
body
{
    /* make the body a vertical flex container */
    /* https://css-tricks.com/snippets/css/a-guide-to-flexbox/ */
    display: flex;
    flex-direction: column;
    /* make sure we use the full width but allow for more height */
    width: 100%;
    min-height: 100%; /* this helps with the sticky footer */
}
main
{
    /* Allow the content to grow but not shrink */
    flex-grow: 1;
    flex-shrink 0;
    /* for debugging, a blue background lets us see the content */
    background-color: skyblue;
}
footer
{
    /* do not allow the footer to shrink */
    flex-shrink: 0;
    /* for debugging, a gray background lets us see the footer */
    background-color: gray;
}