<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> *{ margin:0; padding: 0; } html,body{ height: 100%; } #container{ width: 100%; min-height: 100%; padding-bottom: 50px; /*底部空出50px，放footer*/ position: relative; box-sizing: border-box; /*效果：padding后不改变其宽高*/ } .nav{ /*最上面的div不能有margin-top，不然会造成整个body下移*/ width: 100%; height: 50px; background-color: blue; } .main{ width: 100%; height: 400px; background-color: red; } .footer{ height:50px; background-color: yellow; position: absolute; /*相对于#container固定定位*/ left: 0; bottom: 0; width: 100%; } </style> <body> <div id="container"> <div class="nav"></div> <div class="main"></div> <div class="footer"></div> </div> </body> </html>
原文：https://www.cnblogs.com/cl94/p/10335834.html