Sticky footer markup.
$site-wrapper-max-width: 1200px;
$content-background-color: #fff;
// Site wrapper
// ============
.site-wrapper {
& {
position: relative;
width: 100%;
height: 100%;
margin: 0 auto;
max-width: $site-wrapper-max-width;
}
// Site wrapper
// ------------
> .main-wrapper {
& {
display: table;
table-layout: fixed;
width: 100%;
height: 100%;
overflow: hidden;
}
> .main-content-wrapper {
height: 100%;
background-color: $content-background-color;
}
> .main-footer-wrapper {
height: 1px;
}
> .main-header-wrapper,
> .main-footer-wrapper,
> .main-content-wrapper {
display: table-row;
}
> .main-header-wrapper > .main-header,
> .main-footer-wrapper > .main-footer,
> .main-content-wrapper > .main-content {
display: table-cell;
vertical-align: top;
}
}
}
<body>
<div class="site-wrapper">
<div class="main-wrapper">
<!-- Header -->
<div class="main-header-wrapper">
<header class="main-header">
Header Content
</header>
</div>
<!-- /Header -->
<!-- Content -->
<div class="main-content-wrapper">
<main class="main-content">
Main Content
</main>
</div>
<!-- /Content -->
<!-- Footer -->
<div class="main-footer-wrapper">
<footer class="main-footer">
Footer Content
</footer>
</div>
<!-- /Footer -->
</div>
</div>
</body>