Let footer fixed page (viewport) bottom (CSS-Sticky-Footer)

This is a technique to make the site footer fixed in the browser (the browser page content is less than the height) / bottom of the page. Implemented by HTML and CSS, no annoying hacks. So that it can normally run on all major browsers (even IE5 and IE6).

How to make CSS Footer fixed by the top of the page.

Add the following lines of code in the CSS style sheet inside. .wrapperWith negative margins .footerand .pushequal height. Negative margins should be equal to the overall height of the footer (including padding, border).

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important; /* 如果你不需要考虑IE6，则可以把这行与下一行代码删除 */
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
}

According to this HTML structure. Content will not exceed .wrapper and .footer the divlabel, unless the content is exceeded by CSS absolute positioning. In addition, .pushthe divlabel should not contain content, after all, it is as a hidden element will footer "push" down. Otherwise it will overlap with the contents of the footer.

<html>
    <head>
        <link rel="stylesheet" href="layout.css" />
    </head>
    <body>
        <div class="wrapper">
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer">
            <p>Copyright (c) 2008</p>
        </div>
    </body>
</html>

Multi-column layouts (via floating)

To .pushadd clear attribute div.

.footer, .push {
    clear: both;
}

height: auto important; and height:! 100%; property

These two properties in order to achieve the following browsers IE6 and min-height effect (min-height only compatible IE7 and above). So, when you need to consider when IE6, you can delete these two attributes.

Because IE6 is to consider the size of an element's content, rather than the size of the element itself. In standards-compliant browser, if the content of the element is too large, it will only beyond the box. However, in IE6, if the element content is too large, the entire element will be extended (including width and height). I.e., set width behaves like min-width.

The complete code: https://github.com/JChehe/CSS-Sticky-Footer/blob/master/CSS%20Sticky%20Footer.html
Reference: http://ryanfait.com/resources/footer-stick-to-bottom- of-page /