CSS application: Keep the footer close to the bottom of the page

How to use Sticky Footer code

Introduction

Google can find many ways to keep the footer close to the bottom of the page. I tried many of them, but they always have some problems in some aspects. These problems may be caused by the browser version update. Some methods are too old, so the browser of the old version can work normally, but it is no longer applicable to the updated version. Because these pages have been too long and have been linked to a large number in the past, they rank very high in Google's results. In this way, when some website administrators search for the sticky footer solution, they are very scratching their heads on the search results, because the methods that rank at the top of the search results have such problems.
As we all know, Ryan Fait works well. However, it must write a div with no content separately to provide additional "push ". People who have strict requirements on HTML semantics can say that such code writing is not in line with the specifications, and our solution does not need to add a div.
The Sticky Footer solution to be introduced is based on the results of listing ing Footers article from A List Apart and inspired by the work of Cameron Adams and this piece at lwis.net. In Google Chrome and other browsers, When you scale the window, the footer will float. This solution uses a Clear fix hack method to fix the footer to a proper position, this method also solves the problem that the page layout may be suspended by two or three columns. It works well in more than 50 browser tests.

HTML code

The following is the basic structure of the HTML code. The footer tag is outside the wrap tag.

<! -- Example Source Code -->
<Div id = "wrap">
<Div id = "main" class = "clearfix">
</Div>
</Div>
<Div id = "footer">
</Div>

The page content can be placed inside the main tag. For example, the following is the HTML code for two columns of floating page layout;

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

Put the Header in the wrap, and the main is shown as follows;

<! -- 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 out of wrap or footer, they must use absolute positions; otherwise, the calculated 100% height on the page will be messed up.

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 three times here, which is crucial and the same value must be used for the three heights. The height attribute of wrap extends itself to the size of all the windows. The negative margin increases footer to the position of the main padding because main is already in wrap, so the padding of main is already part of the wrap 100% height. In this way, footer stays at the bottom of the page.
We still need to go to clearfix main.

Clearfix Hack to the Rescue

Most SS designers are familiar with Clearfix Hack, which solves many element suspension problems. Here, we use it to keep the footer in Google Chrome close to the bottom of the page. It also solves the problem caused by two columns of floating layout. In this way, you can put the content in one column and the sidebar in another column, so that the footer will not float due to the suspended content in the main in Some browsers.
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 the Ryan Fait method, add additional push and use clearfix on the page with multiple columns suspended.

What you need to know

Height and margin

Header, wrap, or main label. If top or bottom margin is used for some elements, footer may be moved down. moving distance is generally the height of the margin used. In this case, you can use padding instead of margin to fill the element gap. When the page content is small, footer should have been at the bottom of the page. the scroll bar of the window tells you the position of footer at the bottom of the page. Find the messy margin and replace it with padding.
Be careful when declaring padding for main. If you have added the following code: padding: 0 10px 0 10px, you will overwrite the crucial padding that should have been the same as footer. In Google Chrome, when there are many pages, footer will overlap with your page content.

Font Size

When setting the font size, if you use a relative size, note that some visitors may use a large font in the display configuration. If there is not enough space to hold large fonts under footer, the page height settings will be damaged, leading to unnecessary gaps in footer. Therefore, use
Absolute size (px). Do not use pt or em.