CSS Sticky Footer – How to make a Footer Fixed to the Bottom

In our theme, we have implemented a CSS sticky footer in a simple, modern and responsive way.  It doesn’t use a lot of code and is made with few lines of CSS and JS code.

It’s been a long time since I posted a design tutorial about a modern and clean CSS Timeline. Today we will share an article about making CSS Sticky Footer. We will provide you a solution which should work on all kind of major browsers such as Firefox, Chrome, and IE, etc. This CSS Fixed Footer is not as simple as you’ve seen on the internet, taking a lot of space and looking ugly. Is responsive and we will use the latest CSS3 (flexbox) and HTML standards. We will even enhance it with JS, making our fixed footer hidden when you didn’t scroll down the page. It will be fixed to the bottom and revealed with an awesome effect.

You can see a demo on WeCodeArt Youtube Channel. I have a video there, showcasing our theme options with live preview. Skip to 0:30 if you want to see CSS Sticky Footer reveal effect.

Not only that our CSS Fixed Footer will take less space but we will blend it any design.  For the purpose of this tutorial, I will keep a live example on this blog for a month.

CSS Sticky Footer Markup

In our example, we will use Foundation Flexbox CSS as a base CSS. The markup is very simple: a simple HTML container + 2 lines of CSS codes and a JS as a tool to enhance it. We will use JS to get the height of our CSS fixed footer and apply that height to our body HTML as a margin. With this, we will achieve an awesome reveal effect – using a negative z-index for it. At last, we will remove this effect on small devices due to screen size limit.

The HTML of the Fixed Footer

<footer class='footer fixed'> Content </footer>

As you can see, is very simple. Just a container – you can place anything in it. In my case, by using Foundation FlexBox will look like this:

<footer class='footer fixed'> 
<div class='row medium-unstack'>
<div class='column'> Content </div>
<div class='column'> Content </div>
<div class='column'> Content </div>
</div>
</footer>

Simple row and 3 columns that will unstack of the screen is bigger than a mobile phone screen size (40rem). This the content does not matter, you can use anything, JS will take care of his height.

Sticky Footer CSS

Not more complicated than the HTML, our Sticky Footer CSS is even simpler. I won’t style it with background, font or anything. Is up to you and your preference. I will only give you the basic CSS for the Fixed Footer.

.footer.fixed {
     position:fixed;
     bottom:0;
     width:100%;
     z-index:-99
}

As you see, the Sticky footer CSS is newbie simple.  The position is fixed to the bottom of the window and the width is 100%. The height of Sticky Footer will be the height of its content. A negative index is just for the reveal effect. You will achieve that with just a few lines of JS.

Sticky Footer Javascript

Simple – trust me, super simple. Just two lines of code. One for getting the outer height of the Fixed Footer HTML and another to apply that height to the body as a margin.

( function($) {		
	if ($(window).width() > 767) {
             var fooHeight = $("footer.footer").outerHeight(true); 
	     // Add margin to body for reveal effect
	     $("body").css("margin-bottom", fooHeight+"px");
	}
})( jQuery );

First, what this litle code does ? It gets the height of the footer then it applies that height as a margin to the body HTML element. Having a negative z-index will make our Sticky footer to be revealed when we scroll down. Pretty simple and nice effect for our Sticky Footer.
This is it. All the JS you need to make your sticky footer. Notice that I added the conditional for window width, so this will not run on mobile phones.

Closing Words and final look of the CSS Sticky Footer Project

Is not hard to make your Footer fixed to the bottom and also add an awesome reveal effect with 2 lines of JS. Our Fixed Footer is achieved with less than 10 lines of code. Is super lightweight and will enhance your blog user experience. You can use the HTML, CSS or JS code of the sticky footer on any of your design. You are free to improve the code and share with us.

What do you think about it? You have other suggestions for our Sticky Footer HTML, CSS or JS? Share your knowledge with us.

See you next time with another simple, modern design tutorial.