使用常见的sticky footer布局方式

2024-07-11 08:42:27

字体：大中小

来源：转载

供稿：网友

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

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

上一篇：CSS实现鼠标移动到图片或按钮上改变大小的方法示例

下一篇：css魔法之左边竖条的多种实现方法