资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/常见的sticky footer布局方式

常见的sticky footer布局方式

ctriptech / 1836人阅读

摘要：什么是布局我们常见的网站页面都会把一个页面分为头部区内容区页脚区当头部区和内容区内容较少时页脚区能固定在网页底部而不是随着文档流排布。

什么是sticky footer布局

我们常见的网站页面都会把一个页面分为：头部区、内容区、页脚区,当头部区和内容区内容较少时,页脚区能固定在网页底部,而不是随着文档流排布。当页面内容较多时，页脚能随着文档内容自动撑开,显示在页面的最底部。这就是sticky footer布局。

实现方式 flex 实现

html代码


    

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

        
近段时间房管局四大金刚

css代码

*{
    margin: 0;
    padding: 0;
}
html,body{
    display: flex;
    flex-direction: column;
    min-height: 100%;
    width: 100%;
}
.header{
    background: gray;
    height: 20px;
}
.content{
    flex: 1;
    overflow: auto;
    background: greenyellow;
}
.footer{
    background: pink;
    height: 20px;
}

flex布局方法简单代码少，因为pc端兼容性不是很好，可以广泛用于移动端。

负margin布局方式

html代码


        

            
这里是头部

        

        

            
近段时间房管局四大金刚

            
近段时间房管局四大金刚

            
近段时间房管局四大金刚

            
近段时间房管局四大金刚

            
近段时间房管局四大金刚

            
近段时间房管局四大金刚

            
近段时间房管局四大金刚

            
近段时间房管局四大金刚

            
近段时间房管局四大金刚

            
近段时间房管局四大金刚

            
近段时间房管局四大金刚

            
近段时间房管局四大金刚

            
近段时间房管局四大金刚

            
近段时间房管局四大金刚

            
近段时间房管局四大金刚

            
近段时间房管局四大金刚

            
近段时间房管局四大金刚

            
近段时间房管局四大金刚

            
近段时间房管局四大金刚

            
近段时间房管局四大金刚

        

    

    

        
© 2017 No rights reserved.

        
Made with ♥ by an anonymous pastafarian.

css代码

* {
    margin: 0;
    padding: 0;
    text-align: center;
}

.wrapper {
    min-height: 100%;
    width: 100%;
}

.main {
    margin-top: 64px;
    padding-bottom: 64px;
}

.footer {
    margin: -64px auto 0 auto;
    background: orange;
}

.clearfix::after {
    display: block;
    content: ".";
    height: 0;
    clear: both;
    visibility: hidden;
}

这是兼容性最好的方案,各大浏览器都可兼容，就是需要提前知道footer的高度。且结构相对复杂。

私有云 超融合服务器 常见的数据存储方式 android布局方式 ddos常见攻击方式 Sticky

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114405.html

相关文章

  • 前端经典布局：Sticky footer 布局

    摘要：使用布局达到了预期的效果，及时内容区较少，页脚区块也是固定在底部。二布局方式代码这种方法就是利用布局对视窗高度进行分割。 什么是Sticky footer布局？前端开发中大部分网站，都会把一个页面分为头部区块、内容区块、页脚区块，这也是比较。往往底部都要求能固定在屏幕的底部，而非随着文档流排布。要实现的样式可以概括如下：如果页面内容不够长的时候，页脚区块在屏幕的底部；如果内容足够长的时...

    JerryWangSAP 评论0 收藏0

  • css中底部sticky footer

    摘要：设计是最古老和最常见的效果之一，它可以概括如下如果页面内容不够长的时候，页脚块粘贴在视窗底部如果内容足够长时，页脚块会被内容向下推送。所有内容区好，方法一也比较推荐，以上就是个人对的理解 Sticky footers设计是最古老和最常见的效果之一，它可以概括如下： 1 如果页面内容不够长的时候，页脚块粘贴在视窗底部； 2 如果内容足够长时，页脚块会被内容向下推送。 出现问题如图：sho...

    wenzi 评论0 收藏0

  • Sticky footers实现套路

    摘要：第二种方式首先提一个概念相对于视窗的高度视窗高度是。这种需求刚好符合。提供一种增加包裹层实现方式。 无论是pc还是移动端，有一种布局叫做Sticky footers，何为Sticky footers？百度翻译：粘粘的页脚[笑哭],不过意思也算对吧，就是如果页面内容不够长的时候，页脚粘贴在视窗底部；如果内容足够长时，页脚块会附在内容区块下面。那么如何来实现这种效果呢，今天来用两种方式聊一...

    sushi 评论0 收藏0

  • 前端必懂之Sticky Footer(粘性页脚)

    摘要：写在最前是的一种布局场景。页脚永远固定在页面的底部，页面内容不够长的时候页脚黏在视窗底部，内容足够长时会被向下移动。老式门户网站由于内容过短常常版权页脚前移，移动端特定布局也需要来解决这些问题。 showImg(https://segmentfault.com/img/bVbrIV9?w=200&h=354); 写在最前：Sticky Footer是css的一种布局场景。页脚foot...

    piapia 评论0 收藏0

发表评论

登陆后可评论

0条评论

ctriptech

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<