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.