Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
June 30, 2020 10:40 pm GMT

How to create a sticky Website footer in 5 different ways

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

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

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>

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

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

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

Advantages

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

Disadvantages

I don't know of any. If you do let me know in the comments.

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>

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

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>

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

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>

The CSS

html,body {    height: 100%;    margin: 0;}.wrapper {    min-height: 100%;}.main {    padding: 1em;}

The jQuery

$(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

Currently, I don't know of any. If you do, let me know in the comments.

Conclusion

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


Original Link: https://dev.to/ziizium/how-to-create-a-sticky-website-footer-in-5-different-ways-5515

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To