CSS for bottom pinning

In the production page there is a phenomenon: When an HTML page contains less content, the "footer" part of the Web page with the floating up, in the middle of the page martingale, to the visual effect of a great impact, make your page look very bad, especially now more and more widescreen, this phenomenon is more common.

So how to fix the "footer" part of the Web page to the bottom of the page forever? Notice here that the footer footer is always fixed at the bottom of the page, not permanently at the bottom of the display screen,

In other words, when the content is only a little bit, the Web page appears at the bottom of the browser, when the content height exceeds the browser height, the footer part of the Web page at the bottom of the page, in a word, the footer part of the Web page is always at the bottom of the page, in other words, Footer Part Forever sink .

Method:

1. HTML Structure:

<DivID= "Container">    <DivID= "header">Header section</Div>        <DivID= "page"class= "Clearfix">page Face tolerance Section</Div>    <DivID= "Footer">Footer section</Div></Div>

To implement this footer is always fixed at the bottom of the page, we only need four Div, where Div#container is a container, in this container, we contain Div#header (head), Div#page (page body part), Div#footer (footer section)

2. CSS code:

Html,body{margin:0;padding:0;Height:100%;}#container{Min-height:100%;Height:Auto!important;Height:100%;/*IE6 does not recognize Min-height*/position:relative;}#header{background:#ff0;padding:10px;}#page{width:960px;margin:0 Auto;Padding-bottom:60px;/*is equal to the height of footer*/}#footer{position:Absolute;Bottom:0;width:100%;Height:60px;/*height of foot*/background:#6cf;Clear:both;}

Principle:

2. height must be set to "100%" in the HTML and body tags, so we can set the percentage height on the container, and we need to add HTML, The body's margin and padding are removed, that is, Html,body's margin and padding are 0;
4. Div#container Container:The Div#container container must have a minimum height (min-height) of 100%, which mainly allows him to maintain a height of 100% in the case of little (or no) content. In addition, we also need to set a "position:relative" in the Div#container container to allow the elements inside the absolute positioning of the Div#container container will not run;
6. div#page Container:div#page This container has a very critical setting that requires a Padding-bottom value to be set on this container, and this value is equal to (or slightly greater than) the height value of the footer div#footer.
8. div#footer Container:The Div#footer container must have a fixed height set. Div#footer also needs to be absolutely positioned, and set bottom:0, so that Div#footer is fixed at the bottom of the container div#container, so that we can achieve the effect we said earlier, when the content is only a little, div# The footer is fixed at the bottom of the screen (because Div#container sets a min-height:100%), and when the content height exceeds the height of the screen, Div#footer is fixed at the bottom of the Div#container, which is fixed at the bottom of the page. You can also add a "width:100%" to Div#footer, allowing him to extend the entire page;
10. Other Div: As for other containers can be set according to their own needs, such as the front of the div#header,div#left,div#content,div#right and so on.

CSS for bottom pinning