第一种：
永久固定，无视页面的内容高度，footer一直位于浏览器最底部
demo：
//样式
<style type="text/css">
body {
/* 底栏需要的高度 h */
padding-bottom: h px;
}
.footer {
z-index: 9999;
position: fixed;
bottom: 0px;
width: 100%;
height: h px;
background-color: #aaa;
}
</style>
<body>
<div class="footer">固定在底部</div>
</body>
第二种：
相对固定，页面内容高度低于浏览器高度，footer显示在浏览器底部，不会出现滚动条；如果页面内容高度高于浏览器高度，footer就在内容的最底部，自动出现滚动条；
demo：
<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>
<body>
<div class="wrap">
<div class="main">
内容
</div>
</div>
<div class="footer">相对在底部</div>
</body>
利用css使底栏固定的两种方式
原文：https://www.cnblogs.com/u-1596086/p/10894225.html
