css固定footer到浏览器底部的方法

<html>
<head></head>
<body>
    <div class="page-wrapper">
        <div class="page-content">内容部分</div>
    </div>
    <footer class="footer">这里是页面底部</footer>
</body>
</html>

//css
html, body{
　　height: %;
}
footer{
  height: 50px;
  line-height: 50px;
  background-color: #62f1c3;
  text-align: center;
}

1、position: fixed

//css
.page-wrapper{
　　padding-bottom: 50px;
}

.footer{
　　position: fixed;
　　width: 100%;
　　bottom: 0;

}

2、footer前的元素使用负margin-bottom

.page-wrapper{
    height: 100%;
    padding-bottom: 50px;
    margin-bottom: -50px;
    overflow-y: auto;
}

3、footer元素使用负margin-top

 

.page-wrapper{
    height: 100%; 
    padding-bottom: 50px;
    overflow-y: auto;
}
.footer{
    margin-top: -50px;
}

4、使用calc()计算内容部分的高度

.page-wrapper{
    height: calc(% - 50px);
    overflow-y: auto;
}

5、使用flex-box布局

body{
   display: flex;
    flex-direction: column;
}

.page-wrapper{
    flex:   auto;
    overflow-y: auto;
}
.footer{
   flex:   auto;
}