使用常见的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代码

<div class="wrapper clearfix"> <div class="title"> <h1>这里是头部</h1> </div> <div 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> </div> </div> <div class="footer"> <p>© 2017 No rights reserved.</p> <p>Made with ♥ by an anonymous pastafarian.</p> </div>

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的高度。且结构相对复杂。

（编辑：焦作站长网）

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