Simple implementation of html footer at the bottom of the page, and htmlfooter at the page

Simple implementation of html footer at the bottom of the page, and htmlfooter at the page

The following is a simple implementation of html footer at the bottom of the page. I think it is quite good. Now I will share it with you and give you a reference. Let's take a look at it with xiaobian!

Requirement: Sometimes, when the page content is short, the browser height is not supported, but footer is expected to be at the lowest end of the window.

Idea: the minimum height of the parent layer of footer is 100%. If footer is set to absolute (bottom: 0) relative to the parent layer, the height of footer should be reserved in the parent layer.

Html code:
 

<! -- Parent layer --> 2. <p id = "wapper"> 3. <! -- Main content --> 4. <p id = "main-content"> 5. </p> 6. <! -- Footer --> 7. <p id = "footer"> 8. </p> 9. </p>

CSS:
 

1. # wapper {2. position: relative;/* important! Ensure that footer is relative to the position of wapper */3. height: auto;/* Ensure that the page is displayed normally when the browser height is enabled */4. min-height: 100%/* IE6 is not supported. IE6 must be configured separately */5 .} 6. # footer {7. position: absolute; bottombottom: 0;/* Key */8. left: 0;/* remember it in IE */9. height: 60px;/* the height of footer must be fixed */10 .} 11. # main-content {12. padding-bottom: 60px;/* important! Space reserved for footer */13 .}

At this time, other browsers can be normally displayed, but IE 6 should be handled separately:

1. <! -- [If IE 6]-> 2. <style> 3. # wapper {height: 100%;}/* the layer is automatically opened when the height of IE is not enough */4. </style> 5. <! [Endif] -->