网页常见的底部栏（footer）目前有两种：
一、永久固定，不管页面的内容有多高，footer一直位于浏览器最底部，适合做移动端底部菜单，这个比较好实现;(向立凯)
二、相对固定，当页面内容高度不沾满浏览器高度，footer显示在浏览器底部，且不会出现滚动条，如果页面内容高度超出浏览器高度，footer则相对与内容的最底部，并且自动出现滚动条；(向立凯)
废话不多说，可以直接复制代码查看效果
一、永久固定(向立凯)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> </title> <meta charset="utf-8" /> <style> body { padding-bottom: 50px; } .footer { position: fixed; left: 0px; bottom: 0px; width: 100%; height: 50px; background-color: #eee; z-index: 9999; } </style> </head> <body> 内容，可以大量复制看效果 <br /> <div class="footer">固定在底部 </div> </body> </html>二、相对固定(向立凯)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> </title> <meta charset="utf-8" /> <style type="text/css"> * { margin: 0px; padding: 0px; } html, body { height: 100%; } .footer { margin-top: - 50px; height: 50px; background-color: #eee; z-index: 9999; } .wrap { min-height: 100%; } .main { padding-bottom: 50px; } </style> </head> <body> <div class="wrap"> <div class="main"> 内容，可以大量复制看效果 <br /> </div> </div> <div class="footer">相对在底部 </div> </body> </html>