A Simple Method to Place the footer of HTML at the bottom of the page

Time:2019-8-10

Demand:Sometimes, when the content of the page is short, browser height cannot be supported, but footer is expected to be at the bottom of the window.

Ideas:The minimum height of the footer’s parent layer is 100%. The footer is set to absolute bottom: 0 relative to the parent layer, and the footer’s height should be reserved in the parent layer.

HTML code:

XML/HTML CodeCopy content to clipboard
  1. <! – Father level – >     
  2. <div id=“wapper”>     
  3.     <! – Main Contents – >     
  4.     <div id=“main-content”>     
  5.     </div>     
  6.     <! – Footer – >     
  7.     <div id=“footer”>     
  8.     </div>     
  9. </div>     

CSS is as follows:

CSS CodeCopy content to clipboard
  1. #wapper{     
  2.     positionrelative;   /* Important! Ensure that footer is absolutely relative to wapper position*/     
  3.     heightauto;          /* Guarantee that the page will display normally when the height of the browser is extended*/     
  4.     min-height: 100%  /* IE6 is not supported, IE6 should be configured separately*/     
  5. }     
  6. #footer{     
  7.    positionabsolute;  bottombottom: 0; /* Key*/     
  8.    left:0; /* IE Next Must Remember*/     
  9.    height60px;         /* The height of footer must be a fixed value*/     
  10. }     
  11. #maincontent{     
  12.    padding-bottom60px/* Important! Reserved space for footer*/     
  13. }     

At this time, other browsers can display normally, but IE 6 has to deal with:

CSS CodeCopy content to clipboard
  1. <!–[if IE 6]->     
  2. <style>     
  3. #wapper{height:100%;} /* IE automatically opens the floor when the height is insufficient*/     
  4. </style>     
  5. <![endif]–>     

The simple way to realize the footer of HTML at the bottom of the page is to share all the contents of the editor. I hope to give you a reference, and I hope you will support developpaer more.