Sticky footers are not to be confused with fixed footers – a sticky footer is a pattern where the footer always sticks either to the bottom of the screen (in cases where content does not fill up the page) or sticks to the bottom of the webpage content. A fixed footer simply stays at the bottom of the screen as the user scrolls the page. These code editor examples distinguish the difference:
Fixed Footer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sticky Footer</title>
</head>
<style>
body {
width: 100%;
margin: 0 auto;
text-align: center;
}
header {
background: orange;
height: 100px;
display: inline-block;
width: 100%;
}
p {
text-align: left;
width: 80%;
margin: 0 auto;
line-height: 5rem;
font-size: 2rem;
text-indent: 5rem;
}
footer {
background: black;
color: white;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
<body>
<header>
<h1>This is a header</h1>
</header>
<div>
<h2>This is the website content.</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Aspernatur cum aliquid nostrum dolore sunt ex exercitationem,
enim provident quia laudantium, blanditiis repellendus similique
in possimus, nisi voluptatem? Quibusdam, suscipit impedit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
veritatis doloremque recusandae similique mollitia quod impedit,
rerum inventore beatae quia vel aperiam maiores corrupti tenetur
illo praesentium repudiandae a distinctio?
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta
saepe, reiciendis in maxime perspiciatis cum similique a quis
accusamus blanditiis harum voluptates at doloribus autem numquam
sint? Qui, tempora ratione!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde,
deserunt placeat? Laborum voluptates minus, adipisci odit
repellat corrupti libero! Asperiores delectus quasi debitis
mollitia eum et vel recusandae quas esse.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Molestias ad dolorem rerum suscipit eos eius libero animi omnis,
ea esse distinctio doloremque corporis, a quidem inventore sequi
nostrum aut impedit.
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Suscipit quod ipsum maiores, minus non atque asperiores corrupti
placeat nulla temporibus est libero numquam ad culpa architecto
reprehenderit nemo doloribus ipsa?
</p>
</div>
<footer>
<h5>This is a fixed footer.</h5>
</footer>
</body>
</html>
Sticky Footer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sticky Footer</title>
</head>
<style>
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.page-header, .page-footer {
flex-shrink: 0;
}
h1, h2, h3, h4, h5 {
text-align: center;
}
.orange {
background: orange;
}
.page-body {
background: blue;
flex-grow: 1;
}
.page-body p {
text-align: left;
width: 80%;
margin: 0 auto;
line-height: 4rem;
font-size: 1.8rem;
text-indent: 4rem;
}
.black {
background: black;
color: white;
}
</style>
<body>
<div class="container">
<header class="page-header orange">
<h1>This is a header</h1>
</header>
<div class="page-body">
<h2>This is the website content.</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
</div>
<footer class="page-footer black">
<h5>This is a sticky footer.</h5>
</footer>
</div>
</body>
</html>
Conclusion
The fixed footer uses position to keep it at the bottom of the screen. The second uses flexbox’s flex-grow and flex-shrink properties to keep the footer at the bottom of the content. Take notice of the difference in the characteristics of the footer in each of the code examples.
Playing in the sandbox environment above will help you understand these patterns. Try changing things up and experimenting with different values.