当前位置:Web前端 > > 正文

stickline如何向前移动(使用常见的sticky footer布局方式)

时间:2022-04-02 14:14:13类别:Web前端

stickline如何向前移动

使用常见的sticky footer布局方式

什么是sticky footer布局

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

实现方式

flex 实现

html代码

  • <header class="header"></header>
        <main class="content">
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
            <p>近段时间房管局四大金刚</p>
        </main>
        <footer class="footer"></footer>
    
  • 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代码

  • <li class="wrapper clearfix">
            <li class="title">
                <h1>这里是头部</h1>
            </li>
            <li class="main">
                <p>近段时间房管局四大金刚</p>
                <p>近段时间房管局四大金刚</p>
                <p>近段时间房管局四大金刚</p>
                <p>近段时间房管局四大金刚</p>
                <p>近段时间房管局四大金刚</p>
                <p>近段时间房管局四大金刚</p>
                <p>近段时间房管局四大金刚</p>
                <p>近段时间房管局四大金刚</p>
                <p>近段时间房管局四大金刚</p>
                <p>近段时间房管局四大金刚</p>
                <p>近段时间房管局四大金刚</p>
                <p>近段时间房管局四大金刚</p>
                <p>近段时间房管局四大金刚</p>
                <p>近段时间房管局四大金刚</p>
                <p>近段时间房管局四大金刚</p>
                <p>近段时间房管局四大金刚</p>
                <p>近段时间房管局四大金刚</p>
                <p>近段时间房管局四大金刚</p>
                <p>近段时间房管局四大金刚</p>
                <p>近段时间房管局四大金刚</p>
            </li>
        </li>
        <li class="footer">
            <p>© 2017 No rights reserved.</p>
            <p>Made with ♥ by an anonymous pastafarian.</p>
        </li>
    
  • 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的高度。且结构相对复杂。

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐