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.
<DivID= "Wrap"> <DivID= "Main"class= "Clearfix"> <DivID= "Content"> </Div> <DivID= "side"> </Div> </Div></Div><DivID= "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 the footer*/#footer{position:relative;Margin-top:-150px;/*negative value of footer height*/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.
Reprinted from: http://paranimage.com/css-sticky-footer/
"Reprint" CSS Sticky Footer: Perfect css Absolute Bottom