CSS Sticky Footer Layout

CSS Sticky Footer Layout

* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
	height: 100%;
	margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
.footer{background-color: red;}
.footer, .push {
	height: 155px; /* .push must be the same height as .footer */
}

    <div class="wrapper">
        <p>Your website content here.</p>
        <div class="push"></div>
    </div>
    <div class="footer">
        <p>Copyright (c) 2008</p>
    </div>

参考网站：1 http://ryanfait.com/sticky-footer/

2 http://www.cssstickyfooter.com/

16 Apr 2016