flex实现经典的sticky footer布局

来源：互联网发布：无间道陈永仁知乎编辑：程序博客网时间：2024/06/15 08:11

需求分析：当页面内容小于设备屏幕的高度时，底部footer部分固定在屏幕底部，当页面内容超出屏幕高度时，底部footer部分随页面变动，始终在页面的底部。

flex布局实现

html部分

<body>    <header class="header-wrapper">标题部分</header>    <section class="cont-wrapper">内容部分</section>    <footer class="foot-wrapper">版权信息</footer></body>

css部分

 html,body,header,footer,section,div,p{    padding:0;    margin:0;}html{    height:100%;}body{    display:flex;    display:-webkit-box;     height:100%;    flex-direction:column;}.header-wrapper{    width:100%;    height:45px;    line-height:45px;    background:#abcdef;    text-align:center;    font-size:0.3rem;    color:#333;}.cont-wrapper{    font-size:0.3rem;    flex: 1 0 auto;}.foot-wrapper{    width:100%;    height:48px;    line-height:48px;    text-align:center;    background:#ccc;    font-size:0.3rem;    flex: 0 0 auto;}

兼容布局实现

html 部分

<div class="detail">        <div class="detail-wrapper clearfix">            <div class="detail-main"></div>        </div>        <div class="detail-close">            <i class="icon-close"></i>        </div></div>

css部分

.detail{        position:fixed;        left:0;top:0;        width:100%;        height:100%;        z-index:100;        overflow:auto;        transtion:all 0.5s;        background:rgba(7,17,28,0.8);        .detail-wrapper{            width:100%;            min-height:100%;            .detail-main{                matgin-top:64px;                padding-bottom:64px;            }        }        .detail-close{            position:relative;            width:32px;            height:32px;            margin:-64px auto 0;            font-size:32px;            clear:both;        }    }

阅读全文

0 0