<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <title>doc01</title> <style> * { padding:0; margin:0; } /*带有缺陷的解决方法*/ /*body {*/ /*90%;*/ /*margin: 0 auto;*/ /*}*/ /*.wrapper {*/ /*min-height:calc(100vh - 3em);*/ /*background-color: antiquewhite;*/ /*}*/ /*更好的解决方法*/ body { display: flex; /*flex-flow: column;*/ min-height: 100vh; } .wrapper { flex: 1; } .footer { background-color: grey; } </style> </head> <body> <div class="wrapper"> <header class="header"> <h1>site name</h1> </header> <div class="main"> <p> footer紧贴底部footer紧贴底部footer紧贴底部footer紧贴底部footer紧贴底部footer紧贴底部footer紧贴底部 footer紧贴底部footer紧贴底部footer紧贴底部footer紧贴底部footer紧贴底部footer紧贴底部footer紧贴底部 footer紧贴底部footer紧贴底部footer紧贴底部footer紧贴底部footer紧贴底部footer紧贴底部footer紧贴底部 footer紧贴底部footer紧贴底部footer紧贴底部footer紧贴底部footer紧贴底部footer紧贴底部footer紧贴底部 </p> </div> </div> <footer class="footer"> <p>© 2015 No rights reserved.</p> <p>Made with ♥ by an anonymous pastafarian.</p> </footer> </body> </html>
以上代码参考《css揭秘》，神奇的一本书。