[Abstract] How to Use the sticky footer Code (the method for keeping the footer close to the bottom of the page)

• View sticky footer CSS
• View sticky footer html
• 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 with strict HTML semantics can sayCodeThis write is not compliant with the specifications, so we do not need to append the DIV in our solution.

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 <div> label is outside the wrap <div> label.

<Div id = "Wrap"> <Div id = "Main" class = "Clearfix"> </div> <Div id = "footer"> </Div>
 

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

 
<Div id = "Wrap"> <Div id = "Main" class = "Clearfix"> <Div id = "content"> </div> <Div id = "side"> </div> <Div id = "footer"> </div>
 

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

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

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 <div> extends itself to the size of all the windows. The negative margin increases footer to the position of the padding of main <div>, because the main is already in the wrap, the padding of the 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 <div>.

Clearfix hack to the rescue

Most SS designers PairsClearfix hackVery familiar, it solves the problem of element suspension. 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, without the floating content in the main <div> in Some browsers causing the footer to float.

The following code is also added to our stylesheet;

. 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 an additional push <div>. Clearfix is also required in the Multi-column floating page.

Content height and margin to be understood

Header, wrap, or main <div> label. If top or bottom margin is used for some elements, footer may be moved down, the 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 <div>. 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) instead of Pt or em.