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: 100%;
}
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(100% - 50px);
    overflow-y: auto;
}




5、使用flex-box布局




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

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




 






            

            
posted @ 
2018-11-19 16:50 
pei~乐悠悠 
阅读(3557) 
评论(0) 
编辑 
收藏 
举报