May 30, 2021 Article blog
How to use the Sticky Footer code
introduce
Google can find a lot of ways to keep the footer close to the bottom of the page, and I've tried a lot of them, but they always have some problems in some way. T hese problems may be due to the emergence of an updated version of the browser. S ome methods are too old for older browsers to work, but no longer apply to updated versions. A nd because these pages are too long and have been heavily linked in the past, they rank highly in Google's results. A s a result, some webmasters scratch their heads when searching for sticky footer scenarios because of the problems with the methods that come at the top of search results. I t's known as Ryan Fait's scenario, and it does work well. H owever, it must write a separate div with no content to provide additional "push". P eople who are strict on HTML semantics can say that writing code like this is not compliant, and our scenario does not require additional div. T he Sticky Footer scenario to be introduced builds on the results of the Exploring Footers article from A List Apart and is inspired by the work of Cameron Adams and this piece at lwis.net. I n Google Chrome and other browsers, the footer floats when you zoom in and out of the window. T he scheme applies a Clear fix hack method that pins the footer to the appropriate location, which also solves the problem that page layout can cause when two or three columns are suspended. It works well in more than 50 browser tests.
HTML code
Here's the basic structure of the HTML code, with the footer tag outside the wrap tag.
<!--Example Source Code-->
<div id="wrap">
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>
The contents of the page can be placed inside the main label. For example, here's the HTML code for two columns of suspended page layouts;
<!--Example Source Code-->
<div id="wrap">
<div id="main" class="clearfix">
<div id="content">
</div>
<div id="side">
</div>
</div>
</div>
<div id="footer">
</div>
Header is placed inside the wrap, above main, as shown below;
<!--Example Source Code-->
<div id="wrap">
<div id="header">
</div>
<div id="main" class="clearfix">
</div>
</div>
<div id="footer">
</div>
If you need to put some elements outside the wrap or footer, they must use absolute position;
CSS code
The following CSS code keeps the footer close to the bottom of the page.
/Example Source Code/
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* must be same height as the footer /
#footer {position: relative;
margin-top: -150px; / negative value of footer height */
height: 150px;
clear:both;}
You will find that the height of the footer is reused here three times, which is critical, and the three heights must use the same value. T he wrap's height property stretches itself to the full height of the window, and a negative margin raises the footer to the padding position of the main, which is already inside the wrap, so the wrap of the main is already part of the 100% height. I n this way, footer stays at the bottom of the page. It's not finished yet, we still need to go to clearfix main.
Clearfix Hack to the Rescue
Most SS designers are familiar with Clearfix Hack, which solves a lot of elemental suspension, and here we use it to keep the footer in Google Chrome close to the bottom of the page. I t also solves the problem caused by the two-column suspension layout. T his way you can put the content in one column, sidebar in another column, without the suspended content in the main under the individual browser causing the footer to float up. The following code is also added to our stylesheet;
/Example Source Code/
.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 */
If you prefer Ryan Fait's approach, add additional push, which is also required for clearfix on multi-column suspended pages.
What you need to know
Height and margin
Header, wrap, or inside the main label, if you use top or bottom margin for some elements, you may see footer moving down, generally at the height of the margin used. I n this case, you can use padding instead of margin to fill the element gap. W ith less page content, footer should have been at the bottom of the page, and the scroll bar of the window tells you where footer is at the bottom of the page. F ind the messy margin and replace it with padding. B e careful when declaring padding for main, if you add code like this: padding:0 A t 10px 0 10px, you cover the crucial padding that should have been the same as footer. In Google Chrome, footer overlaps with your page content when there's a lot of content on the page.
The size of the font
When setting font sizes, if you use relative sizes, be aware that some visitors may use larger fonts in your display configuration. I f there is not enough space left under footer to accommodate large fonts, the page height setting is broken, resulting in extra space under footer. Therefore, use Absolute Size (px) and do not use pt or em.