效果如图:
代码:
html, body { width: 100%; height: 100%; min-height: 100%; } .container { position: relative; height: auto; min-height: 100%; //关键的一行代码 margin: 0; } .container .header { height: 100px; background: #0000FF; } .container .push { padding-bottom: 100px; } .footer { position: relative; height: 100px; margin-top: -100px; background: #0000FF; border: #0000FF 1px solid; } //DOM <div class="container"> <div class="header"> <p>头部文本</p> </div> <div class="content"> <p>主体内容</p> </div> </div> <div class="footer"> <p>底部文本</p> </div>