How to use sticky footer

Introduction

In Google you can find many implementations of sticky footer. I tried most of them, and usually somewhere they let them down. Mainly due to the fact that the proposed methods were too old and did not work in new browsers. But, since the pages offering solutions are quite old, many other sites have long been linked to them, which is why they are still quite high in Google search results. Webmasters find them the very first in their search, and then scratch their turnips for a long time, not seeing anything new.

The solutions of Ryan Faith are well known and work, but they require an extra empty <div>. Adherents of pure HTML may find this blasphemy unsemantic. There is no extra <div> in our solution.

The sticky footer presented here is based on information obtained from the article Studying footers on List Apart, as well as with Cameron Adams material and this piece from lwis.net . He uses a clearfix hack to keep the footer in its place in Google Chrome and other browsers, where it can “pop up” when the window is resized. Also, this hack allows you to avoid problems if you use float to create two- or three-column layouts. We tested it in more than 50 browsers, and it works fine.

HTML code

Below is the simplest structure of HTML code. You probably already noticed that the <div> with the footer is outside the wrapping <div> 'a.
')

< div id ="wrap" >

< div id ="main" class ="clearfix" >

</ div >

</ div >

< div id ="footer" >

</ div >


The content of your page can be placed inside <div> 'and main. For example, for a two-column layout, the code would be:

< div id ="wrap" >

< div id ="main" class ="clearfix" >

< div id ="content" >

</ div >

< div id ="side" >

</ div >

</ div >

</ div >

< div id ="footer" >

</ div >


The cap can be placed inside the wrap, but outside the main

< div id ="wrap" >

< div id ="header" >

</ div >

< div id ="main" class ="clearfix" >

</ div >

</ div >

< div id ="footer" >

</ div >


If you want to put any elements outside of these blocks, you will have to bother with absolute positioning and calculating 100% height.

CSS code

Below is the CSS code that presses the footer to the bottom:

 html, body, #wrap {height: 100%;}

 body> #wrap {height: auto;  min-height: 100%;}

 #main {padding-bottom: 150px;} / * indent must be equal to the height of the footer * /

 #footer {position: relative;
	 margin-top: -150px;  / * negative footer height * /
	 height: 150px;
	 clear: both;} 

The footer height value is used here three times. It is important that it be the same everywhere. The height properties stretch the wrapping <div> in height to the entire window size. The negative indentation of the footer places it inside the indents of the main- <div> 'a. Since the main is inside the wrap, the height of the indents is already included in the above described 100% height. Thus, the footer remains at the bottom of the page.
But that's not all - you need to assign clearfix-properties main- <div> 'y.

Clearfix-hack to the rescue

Many CSS designers are already familiar with the Clearfix hack . It solves a lot of problems with floating elements. Here we use it to nail the footer to Google Chrome. He will also relieve us of problems with the “ascent” of the footer in the situation, for example, when in a two-column layout the content floats in one direction and the sidebar in the other.
Therefore, we add this to the styles:

 .clearfix: after {content: ".";
	 display: block;
	 height: 0;
	 clear: both;
	 visibility: hidden;}
 .clearfix {display: inline-block;}
 / * Hides from IE-mac \ * /
 * html .clearfix {height: 1%;}
 .clearfix {display: block;}
 / * End hide from IE-mac * /

Even if you are using Ryan Faith’s method with more than a <div>, you’ll have to apply this hack to multi-column layouts.

Known Issues

Height and margins

If you use vertical indents inside some elements, this can push the footer down the distance of these indents, in a header, for example, or even in wrap or main. Instead of margins outside (margins) it’s better to use padding inside. You may notice that the content on the page is not so much, and the footer crawls out of the window and a vertical scroll bar appears: check to see if there are any margins, and replace them with padding.
Be careful when declaring indentation for main <div> 'in different places. If you want to add something like padding: 0 10px 0 10px ;, be careful - this can override the indentation below, which should be strictly certain size, the content can go over the footer on long pages (in Google Chrome).

Font sizes

By setting the font size in relative terms, remember that users can increase them. In some elements, even in the footer, this can spoil the height settings and it will break if the text does not have enough space. Use absolute values ​​(pt or px), or just make the footer bigger.

.NET platform

When developing sites on ASP.net, where each page is inside <form>, do not forget to add height: 100% for a form, like this:

 html, body, form, #wrap {height: 100%;}

UPD from translator. I consider it necessary to clarify for you, gentlemen, a few points:
1. This is a topic translation. All questions and outrage about the methods you can send to the author, his name is Steve Hatcher, the link was attached from the very beginning
2. In connection with IE-Mac, non-work in Chrome and other things: guys, it is not known when this method was written, but it was updated and revised, and besides it works in the vast majority of browsers. “Doesn't work in Chrome” may mean that the footer was floating somewhere in the early builds of this browser. So what if you have the latest update? There are people who do not update the browser simply because they do not know about this feature, or simply do not see the need for it. Will it make you worse because this method works everywhere? Well, really?
3. pt vs. em vs. px vs. % Use on your site what you want. The author has proposed TWO methods for solving problems with moving proportions, nobody forbids you or imposes the use of any of them. We are all not small and we know what is good and what is bad.