CSS Sticky Footer: Perfect css Absolute Bottom

Here is a more perfect method I found, from foreign design, pure CSS, can be achieved: when the body content is very small, the bottom of the window is below. When you change the height of the window, there is no overlap problem.

<div id= "wrap" >    <div id= "main" class= "Clearfix" >        <div id= "Content" >        </div>        <div id= "side" >        </div>    </div></div><div id= "Footer" ></div>

Description : The premise of using this layout is that footer to the total div container, footer uses a layer, and all other content uses a total layer. If you do need to add another sibling layer, you must use Position:absolute for absolute positioning.

CSS code:

The following is the main CSS code, so that your bottom can be at the top 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; /* Footer Height Negative */    height:150px;    Clear:both;}

Note: It should be noted that the padding value of #main, the height of footer, and the negative margin values need to be consistent.

It's that simple, but it's not over yet. If your subject is using a floating layout, and you have to solve some browser compatibility issues, the focus here is to Goolge Chrome.

The famous Clearfix Hackfor the #main part:

. 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: The program is tested in two-column suspension layouts that are compatible with major mainstream browsers, including Google Chrome.