How to create a sticky Website footer in 5 different ways

Habdul Hazeez - Jun 30 '20 - - Dev Community

Cover photo by Sean Pollock on Unsplash.

Introduction

Most Website have two components in common which are header and footer. The header is always found at the top of the Web page and the footer, at the bottom of the page.

The header usually contains navigational, search form e.t.c. while the footer contains supplementary information. The footer is meant to stay at the bottom of the Web page but sometimes and due to some certain conditions it might not be at the bottom of the page.

At the onset of your design if the Web page has enough content you might feel the footer is right where it belongs but when you zoom the page you'll realize it's not.

In the image below the Web page does not have enough content and the footer is not at the bottom of the page where it should be.

A Web page and the footer out of place
A Web page

In this article we'll detail how to create a footer that sticks at the bottom of the page using five different methods.

Let's begin.

Before we dive into code examples and explanation it's best if we list the methods so that we have a clear picture of what we are about to do. The methods are:

  • CSS positioning (absolute and fixed)
  • CSS Flexbox
  • Wrapper push with Flexbox
  • CSS calc() function with Flexbox
  • jQuery with CSS Flexbox

CSS positioning: Absolute

CSS absolute positioning allows the developer to position a page element using offset properties like top and bottom. When the parent element has the default positioning; static the element is positioned relative with the browser's viewport otherwise it's positioned relative to the parent element.

We can use this behavior to position the footer at the bottom of the page.

How it works

In the CSS code the html and body element have their height set to 100% so the Web page occupies the viewport height.

In the HTML the body element should contain an inner element preferably a div.

The div will have the position property set to relative in CSS, and a min-height property set to 100% and it will contain the footer as its child element.

The body must have a padding-bottom with its value the same as the height of the footer. If we don't do this part of Web page content will be covered by the footer when the Web is zoomed to a certain percentage.

Assuming a default browser font size of 16px this should be about 240% zoom level.

The code

The following are the HTML and CSS for the preceding explanations.

The HTML 

<body>
  <div class="container">
    <!-- Put your content here -->

    <footer>
        <!-- Put footer content here -->
    </footer>
  </div>
</body>
Enter fullscreen mode Exit fullscreen mode

The CSS 

html,
body {
    padding: 0;
    height: 100%;
}

.container {
    min-height: 100%;
    position: relative;
}

body {
    padding: 10px;
    padding-bottom: 60px;   /* Height of the footer */
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;              /* Height of the footer */
    background: #1560bd;
}
Enter fullscreen mode Exit fullscreen mode

Advantages

  1. It is easy to set up

Disadvantages

  1. The HTML code will be frowned upon because the container contains the footer on a normal day this should not be the case because if this is employed in a large code base and anyone taking a look at it for the first time will find it odd to find the footer inside the container.

CSS positioning: fixed

This is similar to its absolute position counterpart and it uses less code.

How it works

In the CSS, the body element is given a relative positioning and the footer is giving a fixed positioning using offset properties.

The Code

The following are the code snippets for sticky footer using CSS fixed positioning.

The HTML 

<body>
    <header>
        <!-- Put header content here -->
    </header>

    <main>
        <!-- Put main content here -->
    </main>

    <footer class="sticky">
        <p>This is a footer</p>
    </footer>
</body>
Enter fullscreen mode Exit fullscreen mode

The CSS 

body {
    position: relative; /* Sets up positioning for your footer
*/
}

.sticky {
    position: fixed; /* Here's what sticks it */
    bottom: 0; /* to the bottom of the window */
    left: 0; /* and to the left of the window. */
    height: 44px;
    width: 100%;
    padding-top: 20px;
    background: #000000;
    color: #ffffff;
    text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

Advantages

  1. It is easy to set up with less code.

Disadvantages

  1. Using fixed positioning on a footer might really look old school.

CSS Flexbox

A sticky footer with Flexbox will be considered more modern. It uses less code and almost self-explanatory. But we are still going to explain how it works. Let's go.

How it works

The trick is to change the display property of the body to flex and set the flex-direction to column. In addition, the height of the body element should be at least 100vh; the height of the current viewport. With this mind, it's clear we have to use the min-height property.

The min-height property will tell the browser to use the 100vh as the minimum value and change as needed.

There should be some kind of container before the footer that will have a flex-grow property set to 1.

The Code

The following are the HTML and CSS code for creating a sticky footer with CSS Flexbox.

The HTML 

<body>
    <main>
        <p> <!-- Put text here --> </p>
    </main>

    <footer>
        <!-- Put footer content here -->
    </footer>
</body>
Enter fullscreen mode Exit fullscreen mode

The CSS 

body {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background-color: #f9f9fa;
}

main {
    flex: 1;
}

footer {
    width: 100%;
    text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

Advantages

  1. The code is easy and simple if you know how Flexbox works.

Disadvantages

  1. The 100vh of the min-height property assoiated with the body selector is weird in most mobile browsers due to their mutable viewport heights. They hide the top and bottom browser menus.

Wrapper push with Flexbox

Wrapper push is a technique where there is additional markup (a div of some kind) before the last element on the Web page; usually the footer.

The div is giving a height and this height value is deducted from the bottom of the wrapper. What is the wrapper?

The wrapper is a container that contains most of the Web page content.

In addition, the html and body element should have a height set to 100%.

How it works

Read the last three paragraphs.

The code

The code is similar to code for previous examples but take note of the negative margin values in the CSS.

The HTML 

<body>
    <div class="wrapper">
        <!-- Put page content here -->

        <div class="push"></div>

    </div>

    <div class="footer">
        <!-- Put footer content here -->
    </div>
</body>
Enter fullscreen mode Exit fullscreen mode

The CSS 

html,
body {
    height: 100%;
    margin:0;
    padding: 0;
}

.wrapper {
   min-height: 100%;
   margin-bottom: -120px; /* Same as push height */
   padding: 10px;
}

.push {
    height: 120px; /* The space between the last element and footer*/
}

.footer {
    background-color: #000;
    color: #fff;
    height: auto;
    width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

Advatanges

  1. Easy to implement.

Disadvantages

  1. Extra markup

CSS calc() function with Flexbox

This works similar to the previous method with notable differences. First, there is no extra markup. Second, the wrapper's height is calculated with CSS calc() function.

The CSS calc() function performs a calculation that will be used as the property value.

In addition, the body and html should have a height of 100%.

How it works

Read the last three paragraphs.

The code

The code is similar to the previous code snippets.

The HTML 

<body>
    <div class="wrapper">
        <!-- Put the website content here -->
    </div>

    <div id="footer">
        <!-- Put the footer content here -->
    </div>
</body>
Enter fullscreen mode Exit fullscreen mode

The CSS 

html,
body {
    height: 100%;
    margin: 0;
}

.wrapper {
    min-height: calc(100vh - 170px);
    padding: 10px;
}

.footer {
    display: flex;
    background-color: #000;
    color: #fff;
    height: 170px;
    width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

Advantages

  1. The height of the wrapper is calculated automatically.

Disadvantages

  1. This technique fails after350% zoom level.

jQuery with CSS Flexbox

jQuery is a JavaScript library designed to ease DOM manipulation. When you are using jQuery in your project you can stick the footer at the bottom of the page with ease.

How it works

The website content should be in a wrapper container in the HTML. In the CSS, the wrapper should have a min-height set to 100%

The html and body should also have a height of 100%.

There is also extra markup that is used to push the footer to the bottom of the page when the page is resized. This markup will be located before the closing tag of the wrapper.

We are using extra markup to push the footer to the bottom of the page. This is similar to what we did in the wrapper push example.

The value was subtracted from the bottom of the wrapper using the padding-bottom value and hard-coded in the CSS.

But here and now, the value will be calculated automatically with jQuery when the browser window is resized.

The Code

The code consists of HTML, CSS and the jQuery code.

The HTML 

<div class="wrapper">
    <main class="main">
    </main>
    <div class="push"></div>
</div>

<footer class="footer">
</footer>
Enter fullscreen mode Exit fullscreen mode

The CSS 

html,
body {
    height: 100%;
    margin: 0;
}

.wrapper {
    min-height: 100%;
}

.main {
    padding: 1em;
}
Enter fullscreen mode Exit fullscreen mode

The jQuery 

$(document).ready(function () {
    $(window).resize(function () {
        var footerHeight = $(".footer").outerHeight();
        var stickFooterPush = $(".push").height(footerHeight);

        $(".wrapper").css({
            marginBottom: "-" + footerHeight + "px",
        });
    });

    $(window).resize();

});
Enter fullscreen mode Exit fullscreen mode

Advantages

  1. Works perfectly in most browser that supports JavaScript.

Disadvantages

  1. Using a third party library.

Conclusion

It's Web development, there are many ways to do the same thing. The choice is yours.

Edit July 8, 2020: Grammar fix.
Updated July 14, 2020: Add disadvantages for the "Flexbox" technique and "jQuery with Flexbox" technique thanks to @pabrick.

Image
🛠️ How to Create an Awesome GitHub Profile Using Markdown
Image
Ensuring Efficacy: The Growing Importance of Cold Chain Logistics in the Pharmaceutical Industry
Image
How and When to Use saveQuietly() for Silent Updates in Laravel
Image
Regex timeout - C#
Image
Backtracking: Solving the N-Queens Problem and Python Implementation
Image
I got terminated i My Zoho Job and Reincarnated as a Full-Stack Next.js Developer!
Image
Implementing AI in a startup is transformative but requires the right strategy.

ai, startup, ethicalai
Image
Shifting Testing Left: The Request Isolation Solution

devex, microservices, testing, devops
Image
How to Integrate HashiCorp Vault with Node.js: Securely Manage Sensitive Data
Image
Bitcoin investment for beginners

webdev, beginners, programming, tutorial
Image
15 Interesting Facts About Lost Car Keys That You Never Knew
Image
10 Meetups On Accidents Lawyer You Should Attend
Image
An Guide To Lost Car Keys No Spare In 2023
Image
Ten Accident Lawyer Near Me-Related Stumbling Blocks You Should Never Share On Twitter
Image
What Are the Benefits of Using a Gree Air Conditioner?
Image
Revolutionizing Fashion: The Rise of the Global Emerging Alternative Leathers Market
Image
Stwórz swoje wymarzone mieszkanie: Przewodnik po aranżacji i dekoracji
Image
Nine Things That Your Parent Teach You About Gas Safe Engineer
Image
Applying an Image on a 3D Model with React Three Drei’s Decal

webdev, react, blender
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .