CSS Sticky Footer: Perfect CSS absolute bottom_html/css_WEB-ITnose

The following is a relatively perfect method I found. A design expert from abroad uses pure CSS to achieve this: When the text content is small, the bottom is at the bottom of the window. There will be no overlapping issues when changing window height.

<div id="wrap">    <div id="main" class="clearfix">        <div id="content">        </div>        <div id="side">        </div>    </div></div><div id="footer"></div>

Note : The prerequisite for using this layout is that the footer must be outside the total div container. The footer uses a layer and all other content uses a layer. Total layer. If you really need to add other sibling layers, then this sibling layer must use position:absolute for absolute positioning.

CSS code:

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

html, body, #wrap {height: 100%;}body > #wrap {height: auto; min-height: 100%;}#main {padding-bottom: 150px;}  /* 必须使用和footer相同的高度 */#footer {position: relative;    margin-top: -150px; /* footer高度的负值 */    height: 150px;    clear:both;}

Note: What needs to be noted is that the padding value of #main, the height of footer and the negative margin value need to be consistent.

It’s that simple, but it’s not over yet. If your main body uses a floating layout, you have to solve some browser compatibility issues. The focus here is on Google Chrome.

Perform the famous Clearfix Hack on 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: This solution was tested on a two-column floating layout and is compatible All major browsers, including Google Chrome.

Reprinted from: http://paranimage.com/css-sticky-footer/