The right way to Create a Sticky Footer with Flexbox

Making a sticky footer is some of the common web development tasks you may easily solve with flexbox. And not using a sticky footer, should you don’t have enough content on the page, the footer “jumps” as much as the center of the screen, which may completely smash the user experience. Before flexbox, developers used negative margins to force the footer all the way down to the underside of the page. Luckily, we don’t need such a hack anymore!

In this text, we are going to show you a straightforward technique that means that you can create a sticky footer with flexbox. It takes just just a few lines of code and a few minutes to implement it.

1. Start with the HTML

In our HTML file, we create a heading, two paragraphs with some lorem ipsum text, and a footer in order that we are able to easily test the sticky footer functionality. Open your code editor, create a recent folder (or project, depending on the code editor) and an empty index.html file within it. Then, add the next code:




    
    
    Sticky Footer with Flexbox
    


    

Sticky Footer with Flexbox

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.

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.

2. Add Some Basic Styles in CSS

To make our demo work, let’s start our CSS file with some easy resets and basic styles. Nonetheless, note that these basic styles are only recommendations and you should use every other styles as an alternative of them — they will not be required for the sticky footer functionality.

Create a style.css file in the identical folder where your index.html file is found. Then, add the next 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. Style the Footer

Now, we add some CSS styles to the footer as well, nonetheless, note that this continues to be not the sticky footer functionality. You possibly can change these basic footer styles to every other design you want.

Add the next code to your stlye.css file, below the previous CSS block:

/* 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;
}

In the event you take a look at the demo now, it would seem like the below image:

As you may see, the footer is displayed in the midst of the screen as a consequence of the shortage of sufficient content. We’ll push it down in the subsequent step with the assistance of flexbox.

4. Make the Footer Sticky with Flexbox

Now let’s see the CSS code that we want to make use of to create a sticky footer with flexbox. The truth is, it’s just five CSS rules. You need to use this system with any type of footer in any browser that supports flexbox. Flexbox support is pretty good by now; currently 97.93% of all browsers in use support it globally, and it’ll get even higher with time.

Here is the code you’ll want to add to your style.css file. Ideally, it’s best to add this snippet before the overall footer styles (added within the previous step):

/* Sticky Footer */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.content {
    flex: 1;
}
footer {
    flex-shrink: 0;
}

Within the code above, we created a column-based flex layout with the assistance of the display: flex; and flex-direction: column; rules. Because of this, your entire tag works as a versatile column — with .content at the highest and

at the underside of the screen.

The min-height: 100vh; rule makes use of the vh viewport unit and ensures that the body element spans across your entire height of the viewport.

We’ve got also made use of the flex and flex-shrink properties. The flex property is a shorthand property that may stand with a special variety of values. When it has just one value, it stands for flex-grow that defines the allocation of additional space on the screen (if there may be any). So, the flex: 1; rule implies that the major content (.content) should get all the additional space on the screen.

To balance out this effect, we also use the flex-shrink property on the footer with the worth of 0. This property defines what happens when there just isn’t enough space on the screen. If its value is 0, it implies that this element shouldn’t shrink whatever happens. In this fashion, we don’t need to be afraid that the footer will by some means disappear (or shrink) on the screen.

Check Out the Demo

Now, should you take a have a look at the demo, you will note that the browser has added the fitting amount of white space to the underside of the content and the footer nicely sticks to the underside of the page:

Sticky footer with flexbox

You possibly can experiment with adding more content to the page as well. You will notice that when there isn’t any extra space on the screen and the page becomes scrollable, the footer just behaves as an everyday footer. It won’t follow the underside of the page but just scroll up and down with the remaining of the content.

You may also take a look at at our live demo to see how the sticky footer functionality looks on an actual server. To have a have a look at the source code, you may open up your browser’s DevTools by hitting the F12 key.

Grab the Entire CSS File

Here is how your entire style.css should seem like, with the sticky footer rules merged into the remaining of the code:

* {
    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 incredible layout module to implement easy and complicated layouts and functionalities alike. It’s a superb idea to create a sticky footer even should you don’t think you would possibly need it, as some users might use an enormous screen on which the page can easily run out of content. With flexbox, it’s really just just a few lines of additional code and takes only a minimal effort.

If you should see other use cases of flexbox besides making a sticky footer, take a look at our tutorials about the best way to create a responsive image gallery and the holy grail layout with flexbox, too.

Leave a Reply

Your email address will not be published.