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

发布时间：2020-12-14 19:49:53 所属栏目：资源来源：网络整理

导读：div class="cnblogs_code" = > ="page-content"内容部分 = >这里是页面底部 span style="color: #008000"// span style="color: #008000"css span style="color: #000000"html,body{ height: span style="color: #800080"100 %span style="color: #000000";




    =>
        ="page-content">内容部分
    
    =>这里是页面底部
    

<span style="color: #008000">//<span style="color: #008000">css

<span style="color: #000000">html,body{

　　height: <span style="color: #800080">100%<span style="color: #000000">;

}

footer{

height: 50px;

line-<span style="color: #000000">height: 50px;

background-<span style="color: #000000">color: #62f1c3;

text-<span style="color: #000000">align: center;

}

1、position: fixed

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

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

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

3、footer元素使用负margin-top

---top: -

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

.page-% --

5、使用flex-box布局

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!