紧贴底部的页脚

栏目: CSS · 发布时间: 7年前

内容简介：紧贴底部的页脚

前言

在写前端页面时，经常会遇到这种情况：有一个具有块级样式的页脚，当页面内容足够长时它一切正常；有的时候，由于页面长度不够，页面底部的页脚会很尴尬的跑上来；页脚不能像我们期望中那样“紧贴”在视口的最底部，而是紧跟在内容的下方。

那么怎样做到内容多时页脚在内容下方，内容少时页脚“紧贴”在视口底部？我总结了四种方法。

正文

首先我先写一个简单的页面结构，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>紧贴底部的页脚</title>
</head>
<body>
    <div class="wrapper">
        <header>
            <span>Header</span>
        </header>
        <main>
            <p>我是内容</p>
        </main>
    </div>
    <footer>
        <span>Fotter</span>
    </footer>
</body>
</html>

再页面加点公共样式：

*{
    padding:0;
    margin: 0;
}
header{
    line-height: 80px;
}
header,footer{
    background-color: #ccc;
    text-align: center;
}
main{
    text-align: center;
    font-size: 30px;
}

接下来我们用四种不同的方法来实现如何让页脚紧贴底部。

方法一

/* footer的每一级父元素都为100%高 */
html,body {
    height: 100%;
    width: 100%;
}
/* 这里将页面内容最小高度设为100%；撑满屏幕，
然后使用margin-bottom负值把页脚吸上来，
最后设置底部内边距用来填充内容过多时被遮挡的页脚。 */
.wrapper{
    height: auto !important;
    min-height: 100%;
    height: 100%;
    margin-bottom: -80px;
    padding-bottom: 80px;
    box-sizing: border-box;
}
footer{
    height: 80px;
}

方法二

方法二和方法一比较类似，只是用伪元素取代了内边距。代码如下：

html,body {
    height: 100%;
    width: 100%;
}
.wrapper{
    height: auto !important;
    min-height: 100%;
    height: 100%;
    margin-bottom: -80px;
}
/* 这里用伪元素取代了方法一中.wrapper的内边距 */
.wrapper::after{
    content: "";
    display: block;
    height: 80px;
}
footer{
    height: 80px;
}

方法三

方法三借助视口相关的长度单位以及 calc() 函数。这两个东西都只能兼容到IE9。

.wrapper{
    min-height:calc(100vh - 80px);
}
footer{
    height: 80px;
}

前三种方法都有一定的局限性，都要给页脚设置固定的高度，不够灵活。有没有更加灵活的方法呢？

当然有，那就是我们方法四了。

方法四

方法四用到了 CSS3 中的布局神器 Flexbox 。

body {
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}
.wrapper {
    flex: 1; 
}

这样就可以了！我们只需要四行简单的代码，就完美实现了紧贴底部的页脚。 Flexbox 是不是相当霸气？

Flexbox 兼容性不是很好（万恶的IE），但在移动端还是不错的。可以放心使用。

后记

上面是我总结的四种方法，如果还有什么更好的方法，欢迎共同探讨！

参考资料：

CSS 总在底部的页脚

CSS揭秘

以上所述就是小编给大家介绍的《紧贴底部的页脚》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Web应用安全权威指南

德丸浩 / 赵文、刘斌 / 人民邮电出版社 / 2014-10 / 79

《web应用安全权威指南》系日本web安全第一人德丸浩所创，是作者从业多年的经验总结。作者首先简要介绍了web应用的安全隐患以及产生原因，然后详细介绍了web安全的基础，如http、会话管理、同源策略等。此外还重点介绍了web应用的各种安全隐患，对其产生原理及对策进行了详尽的讲解。最后对如何提高web网站的安全性和开发安全的web应用所需要的管理进行了深入的探讨。本书可操作性强，读者可以通过下载已......一起来看看《Web应用安全权威指南》这本书的介绍吧!

码农工具

CSS 压缩/解压工具

在线压缩/解压 CSS 代码

HEX HSV 转换工具

HEX HSV 互换工具