网页常见的底部栏(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;
}
内容,可以大量复制看效果