[Post] CSS sticky footer: the absolute bottom of perfect CSS

ArticleDirectory

• Code Writing

 

Original post address: http://parandroid.com/css-sticky-footer/

 

See a good article in The Palan image and paste it here.

CSS is easy to learn. The difficulty of CSS is to find a better solution. In the world of CSS, there seems to be no perfect saying. Therefore, the CSS is at the very bottom, but it is perfect in the solutions I have already seen.

First, Let's explain why we use the CSS bottom layout solution:

When a page is used as a page, if the page content is very small, it is less than filling in the window area of a screen, according to the general layout, the following figure appears (that is, the content at the bottom of the window is not located at the bottom of the window, leaving a lot of blank space.

This is not beautiful for the designers who are not perfect for the future. There are some solutions on the Internet, but there will be a bug that overlaps the bottom with the body when the window height is changed. Although not many people will have things to do to change the window height, the design is perfect.

The following is a perfect method I have found. It can be achieved by a foreign designer, pure CSS: when there is very little content in the body, the bottom is at the bottom of the window. No overlap occurs when the window height is changed.

Even those who created the CSS set up a website to introduce the CSS bottom layout scheme. I don't know if he has applied for a patent :)

Code Writing Method

HTML code:

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

Description: The premise of using this layout is that footer should use a layer outside the total Div container, while all other content uses a total layer. If you do need to add other peer layers, you must use position: absolute for absolute positioning for this peer layer.

CSS code:

The following is the main CSS code, so that your bottom can be located at the bottom of the window:

 
HTML, body, # wrap {Height: 100%;} body >#wrap {Height: auto; Min-Height: 100% ;}# main {padding-bottom: 150px ;} /* must use the same height as footer */# footer {position: relative; margin-top:-150px;/* negative value of footer height */height: 150px; clear: both ;}
 

Description: Note that the padding value of # Main, the height of footer, and the negative margin value must be consistent.

It's that simple, but it's not over yet. If your subject uses a floating layout, you have to solve some browser compatibility issues. Here, the focus is on goolge chrome.

For the # main part, perform the famousClearfix hack:

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

Note: This solution is tested on two-bar floating layout and is compatible with major browsers, including Google Chrome.

P.s:

• Previously, the well-known footer layout was created by Ryan faits, but its method contains an empty Div layer in HTML code. Strictly speaking, it does not conform to the semantic network code standards.
• In addition, there is an article listing ing footers article from a list apart, but some JavaScript code is used.
• In this comparison, the above seemingly simple pure CSS is much greater.

OK. If you do not understand, you can view the specific usage and instructions on the Origin Site.