flex实现经典的sticky footer布局

最新推荐文章于 2023-09-07 20:18:01 发布

思问

最新推荐文章于 2023-09-07 20:18:01 发布

阅读量600

点赞数

分类专栏： flex 文章标签： css 布局

本文链接：https://blog.csdn.net/yshx1990/article/details/78217210

版权

flex 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需求分析：当页面内容小于设备屏幕的高度时，底部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;
        }
    }