How to Create a Sticky Footer That Stays at the Bottom on Any Page

What Is a "Sticky Footer"?

A sticky footer is a layout technique where the footer remains at the bottom of the browser window when the page content is short, but stays at the natural bottom of the page when the content is tall enough.

How to Implement

Assume the page markup is:

<div class="wrapper">
    <div class="content"><!-- main content --></div>
    <div class="footer"><!-- sticky footer --></div>
</div>

Method 1: Absolute Positioning

Place the footer absolutely at the bottom of a relatively positioned wrapper and give the wrapper bottom padding equal to the footer height.

html, body {
    height: 100%;
}
.wrapper {
    position: relative;
    min-height: 100%;
    padding-bottom: 50px;
    box-sizing: border-box;
}
.footer {
    position: absolute;
    bottom: 0;
    height: 50px;
}

Method 2: calc() with Viewport Units

Set the content area’s minimum height to the viewport height minus the footer height, eliminating extra wrappers.

.content {
    min-height: calc(100vh - 50px);
}
.footer {
    height: 50px;
}

This method is concise but relies on calc() and vh support across browsers.

Method 3: Table Layout

Use CSS table display properties to make the wrapper behave like a table, forcing the footer to the bottom.

html, body {
    height: 100%;
}
.wrapper {
    display: table;
    width: 100%;
    min-height: 100%;
}
.content {
    display: table-row;
    height: 100%;
}

Be aware that margins, paddings, and borders may behave unexpectedly on table elements, so avoid adding other styles directly to the table.

Method 4: Flexbox

Flexbox is the most flexible solution; the wrapper becomes a column‑oriented flex container, the content grows to fill remaining space, and the footer naturally stays at the bottom.

html {
    height: 100%;
}
body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.content {
    flex: 1;
}

When using Flexbox, include vendor‑prefixed fallbacks if older browsers must be supported.

Conclusion

All four approaches achieve the sticky‑footer effect, each with trade‑offs: absolute positioning and table layout require a fixed footer height; the calc() method is minimal but depends on modern CSS support; Flexbox offers the most adaptability and allows variable footer heights. Choose the method that best matches your project’s browser support requirements and layout complexity.

References:

https://css-tricks.com/couple-takes-sticky-footer/

http://www.w3cplus.com/css3/css-secrets/sticky-footers.html