How to create a sticky Website footer in 5 different ways
Tags: css, webdev, html, javascript
Published: 2020-06-30 22:40:13

---
title: How to create a sticky Website footer in 5 different ways
published: true
description: A detailed guide on how to create a website footer using five different techniques with their advantages and disadvantages
tags: css, webdev, html, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/gpv7yhzwb7qqdgwqukkr.jpg
---

> Cover photo by [Sean Pollock](https://unsplash.com/@seanpollock) on [Unsplash](https://unsplash.com/).

##__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](https://dev-to-uploads.s3.amazonaws.com/i/sap4u6gdeanzmlvb80op.png)<figcaption>A Web page</figcaption>

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.

<hr>

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__

```html
<body>
  <div class="container">
    <!-- Put your content here -->
    
    <footer>
        <!-- Put footer content here -->
    </footer>
  </div>
</body>
```

####__The CSS__

```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;
}
```

###__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__

```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>
```

####__The CSS__

```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;
}
```

###__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__

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

    <footer>
        <!-- Put footer content here -->
    </footer>
</body>
```

####__The CSS__

```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;
}
```

###__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__

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

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

    </div>
    
    <div class="footer">
        <!-- Put footer content here -->
    </div>
</body>
```

####__The CSS__

```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%;
}
```

###__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__

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

####__The CSS__

```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%;
}
```

###__Advantages__

1. The height of the wrapper is calculated automatically.

###__Disadvantages__

1. This technique fails after`350%` 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__

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

<footer class="footer">
</footer>
```

####__The CSS__

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

.wrapper {
    min-height: 100%;
}

.main {
    padding: 1em;
}
```

####__The jQuery__

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

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

    $(window).resize();

});
```

###__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](https://dev.to/pabrick/)._