[Reprinted] CSS Sticky Footer: the absolute bottom of the perfect CSS, stickyfooter

[Reprinted] CSS Sticky Footer: the absolute bottom of the perfect CSS, stickyfooter

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.

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

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

CSS fixed at the bottom of footer

First, we need to separate the DIV from the overall DIV,
Set the CSS style of the DIV
Bottom: 0;
Position: fixed;

Fixed the question at the bottom of footer with CSS?

# Container {position: absolute; top: 0; left: 0 ;}# footer {position: absolute; bottom: 0; left: 0 ;}