ruk·si
/notes

🎨 CSS
Sticky Footer

Updated at 2018-03-09 08:27

Using Flexbox

Header
Content
Footer
<body class="website">
    <header>Header</header>
    <main class="website-content">Content</main>
    <footer>Footer</footer>
</body>

.website {
    display: flex;
    min-height: 100vh; /* 100% of viewport height */
    flex-direction: column;
    background: yellow;
}
.website-content {
    flex: 1;
    background: red;
}

Using Tables

Main content that takes rest of the area.
This is a footer that hugs the bottom border.
<div class="container-like-body">
    <div class="content">Main content that takes rest of the area.</div>
    <div class="footer">This is a footer that hugs the bottom border.</div>
</div>

.container-like-body {
    display: table;
    width: 100%;
    height: 100px;
}
.content {
    height: 100%;
    background: red;
}
.footer {
    display: table-row;
    height: 1px;
    background: yellow;
}

Sources