Css Sticky Footer The footer to the bottom of the page

Overview: Css Sticky Footer

If the page content is not long enough, the footer block is pasted at the bottom of the window, and if the content is long enough, the footer block is pushed down by the content.

Implementation method:

<! DOCTYPE html> Css Sticky Footer</title> <style> *{padding:0; margin:0} html,body{height:100%;}
		. wrapper{min-height:100%; height:100%; width:100%;}
		. header{width:100%; Height:100px;background-color: #999;}
		. main{padding-bottom:100px;}
		p{height:800px; width:100%; background-color:green;}
		. footer{position:relative;width:100%; height:100px; clear:both; margin:-100px auto 0; Background-color: #666;}
		. Clearfix{display:inline-block;} . Clearfix:after{display:block;content: '. ';
    	Height:0;line-height:0;clear:both;visibility:hidden;} </style> Summarize:
1, you can change the height of the p tag, to see the position of the bottom of the situation

2, the Padding-bottom value of main and footer of the height value, Margin-top negative values to keep consistent

3, the Min-height value of wrapper is 100%,

4. The height value of HTML and body is 100%,wrapper inherits the height of parent element body

5, Clearfix is to clear the floating hack