网页常见的底部栏(footer)目前有两种：

一、永久固定，不管页面的内容有多高，footer一直位于浏览器最底部，适合做移动端底部菜单，这个比较好实现;

body {

padding-bottom: 50px;

}

.footer {

position: fixed;

left: 0px;

bottom: 0px;

width: 100%;

height: 50px;

background-color: #eee;

z-index: 9999;

}

内容，可以大量复制看效果

二、相对固定，当页面内容高度不沾满浏览器高度，footer显示在浏览器底部，且不会出现滚动条，如果页面内容高度超出浏览器高度，footer则相对与内容的最底部，并且自动出现滚动条；

* {

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;

}