HOW TO MAKE A STICKY FOOTER USING FLEXBOX
It’s actually only a few lines of extra code and takes very little effort using flexbox.
Creating a sticky footer is one of the most common web development problems that flexbox can tackle.
Without a sticky footer, if there isn’t enough content on the page, the footer “jumps” up to the center of the screen, which can completely ruin the user experience.
Before flexbox, developers used negative margins to force the footer to the bottom of the page.
Thankfully, such a hack is no longer required!
This post will show an easy way to create a sticky footer with a flexbox.
It only takes a few lines of code and a few minutes to put it together.
1. START WITH THE HTML
Create a heading, two paragraphs with some lorem ipsum text, and a footer in your HTML file so that we can easily test the sticky footer feature.
Open your code editor and make a new folder (or project, depending on your code editor) with an empty index.html page inside.
Then paste in the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Footer with Flexbox</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="content">
<h1>Sticky Footer with Flexbox</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<footer>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</footer>
</body>
</html>2. APPLY SOME BASIC STYLES IN CSS
To get our sample to work, let’s begin our CSS file with some simple resets and styles.
However, keep in mind that these basic styles are only suggestions; you can use any other styles instead; they are not required for the sticky footer feature.
Make a style.css file in the same folder as your index.html page.
Then paste in the following code:
/* Basic styles */
* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0;
}
body {
font-size: 1rem;
}
.content {
padding: 1.5rem;
}
h1,
p {
margin: 1rem 0;
}3. DESIGN THE FOOTER
We now add some CSS styles to the footer as well, however, keep in mind that this does not include the sticky footer feature.
These basic footer designs may be changed to any other design you like.
Add the following code below the previous CSS block to your style.css file:
/* Basic footer styles */
footer {
width: 100%;
background: #111;
margin-top: 1.5rem;
}
ul {
padding: 1.25rem;
text-align: center;
}
ul li {
list-style-type: none;
display: inline-block;
margin: 0.25rem 0.75rem;
}
ul a {
color: #fff;
text-decoration: none;
}
ul a:hover {
text-decoration: underline;
}If you check out the demo now, it will look like the below image:
As you can see, due to a lack of content, the footer is shown in the middle of the screen.
We’ll use flexbox to move it down in the following stage.
4. USE FLEXBOX TO MAKE THE FOOTER STICKY
Let’s look at the CSS code required to make a sticky footer with a flexbox.
In reality, there are just five CSS rules. This method works with any type of the footer in any browser that supports flexbox.
Flexbox support is pretty excellent by now; now, 97.93% of all browsers in use globally support it, and it will only grow better with time.
Here is the code you must include in your style.css file.
This snippet should be added before the normal footer styles (applied in the previous step):
/* Sticky Footer */
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
footer {
flex-shrink: 0;
}Using the display: flex; and flex-direction: column; rules, we created a column-based flex layout in the code above.
As a result, the entire tag works as a flexible column with .content at both the top and bottom of the screen.
The min-height: 100vh; rule uses the vh viewport unit to verify that the body element spans the entire height of the viewport.
We also used the flex and flex-shrink properties.
The flex property is a shorthand property that may hold a variety of values.
When there is only one number, it stands for flex-grow, which defines the allocation of extra screen space (if there is any).
As a result of the flex: 1; rule, the main content (.content) should take up all of the extra screen space.
To counter this effect, we use the flex-shrink attribute with a value of 0 on the footer.
This attribute specifies what happens when there is less screen space.
If its value is 0, this element should not shrink no matter what happens.
We don’t have to worry about the footer disappearing (or shrinking) on the screen this way.
EXPLORE THE DEMO
Now, if you look at the demo, you’ll notice that the browser has put the correct amount of white space at the bottom of the text, and the footer perfectly conforms to the bottom of the page:
You may also experiment with adding extra content to the page.
When there is no extra space on the screen and the page becomes scrollable, the footer works just like any other footer.
It will not remain at the bottom of the page, but will instead scroll up and down with the rest of the content.
You can also view how the sticky footer functionality appears on a real server by visiting our live demo.
To view the source code, use the F12 key on your keyboard to launch your browser’s DevTools.
GRAB THE ENTIRE CSS FILE
This is how your full style looks.
The sticky footer rules should be mixed into the rest of the code, so the CSS should look like this:
* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0;
}
body {
font-size: 1rem;
/* Sticky footer */
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
padding: 1.5rem;
/* Sticky footer */
flex: 1;
}
/* Basic footer styles */
footer {
width: 100%;
background: #111;
margin-top: 1.5rem;
/* Sticky footer */
flex-shrink: 0;
}
h1,
p {
margin: 1rem 0;
}
ul {
padding: 1.25rem;
text-align: center;
}
ul li {
list-style-type: none;
display: inline-block;
margin: 0.25rem 0.75rem;
}
ul a {
color: #fff;
text-decoration: none;
}
ul a:hover {
text-decoration: underline;
}NEXT STEPS
Flexbox is an excellent layout module for implementing both basic and complicated layouts and functionality.
Even if you don’t believe you’ll need it, creating a sticky footer is a smart idea since some people may use a large screen on which the page might quickly run out of material.
It’s actually only a few lines of extra code and requires very little effort using flexbox.
Thank you for spending your time reading this content.
I’ll see you all in my next post. Don’t forget to follow to keep me motivated.
