<!-- 父层 --> <div id="wapper"> <!-- 主要内容 --> <div id="main-content"> </div> <!-- 页脚 --> <div id="footer"> </div> </div>
#wapper { position : relative ; /* Important! Ensure that the footer is absolute relative to the wapper position */ height : auto ; /* Ensure that the page can be displayed normally when the browser height is stretched */ min-height : 100% /* IE6 does not support, IE6 needs to be configured separately */ } #footer { position : absolute ; bottom : 0 ; /* Key */ left : 0 ; /* Be sure to remember under IE */ height :60px ; /* The height of the footer must be a fixed value */ } #main-content { padding-bottom : 60px ; /* Important! Space reserved for footer */ }
<!--[if IE 6]-> <style> #wapper { height : 100% ;} /* IE will automatically spread the layer when the height is not enough */ </style> <![endif]-->