Simple implementation of html footer at the bottom of the page _ HTML/Xhtml _ webpage Creation

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. Requirements: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.

Ideas:The minimum height of the parent layer of footer is 100%. If footer is set to a bottom: 0 position relative to the parent layer, the height of footer should be reserved in the parent layer.

Html code:

Copy XML/HTML Code to clipboard

CSS:

Copy the content to the clipboard using CSS Code.

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%/* not supported by IE6, which 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 a fixed value */
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:

Copy the content to the clipboard using CSS Code.

The simple implementation method of the above html footer at the bottom of the page is to share all the content with you in the small Editor. I hope you can give us a reference and support the footer home.