学习笔记：让元素永久置底的几种方案（css only）

前言

很多同学在使用css+html写页面的时候，可能会遇到这样的场景：

页面除了头部和底部外，中间部分的内容为空时，页面就会出现底部向上顶，也就是头部和底部黏在一起了。

最近开发页面，也遇到了这个问题，经过查阅很多文章和资料后，整理出这篇文章，希望对大家有用。

我们权且把这种解决方案叫：css sticky footer

术语解释

css sticky footer 顾名思义就是使用css来实现有粘性的置底元素。

下面就为大家讲讲几种解决方案，以及这些解决方案的优缺点和兼容性。

方案一利用margin负值和伪元素实现永远置底

这个方案主要是利用三个地方：

html和body元素设置高度100%；
主容器内部设置最小高度为100%，并使用伪元素after撑开一定高度（此高度须与置底元素高度一致），使用margin（这里设置的值也应该与置底元素高度值一致）进行抵消；
置底元素设置一个固定高度

代码如下：

html

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <header>
            this is header
        </header>
        <main class="container">
            this is main
        </main>
        
        <footer>
            this is footer
        </footer>
    </body>
</html>

html,body {
    height: 100%;
}
.container {
    min-height: 100%;
    margin-bottom: -50px;
    background-color: #000;
}
.container:after {
    display: block;
    content: " ";
}
.container:after, footer {
    height: 50px;
}
footer {
    background-color: #f00;
}

搞定！就是这么简单~~~

方案预览

http://runjs.cn/detail/de3rw5qq

方案兼容性

pc

IE 8+
Edge 12+
Firefox 2+
Chrome 4+
Safari 3.1+
Opera 10.1+

移动端

IOS safari 3.2+
Opera mini 全线支持
Android 内置浏览器 2.1+
Blackberry browser 7+
Opera Mobile 12+
Chrome for Android 53+
Firefox for Android 49 +
IE mobile 10+

方案优缺点

优点

兼容性较好，基本现代浏览器都是可行的，不过不兼容IE 8以下
实现简单，只需要简单设置根元素，主容器元素和置底元素几个即可实现；
无需特殊的页面结构，只要设置与置底元素之间的关系即可实现
纯css实现方案！

缺点

需要知道置底元素的高度，且不能修改；
主模块的高度设置为100%，如果遇到不需要100%高度的场景，此方案就得做另外的修改；

方案一总结

总的来说，此方案对于不需要兼容太低版本浏览器的场景是足够用了，兼容性属于比较好的，实现起来也比较方便。

方案二利用flex特性实现永久置底

本方案只需要两步：

设置主容器的display方式为flex
设置置底元素flex为1

上代码：

html

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <header>
            this is header
        </header>
        <main class="container">
            this is container
        </main>
        
        <footer>
            this is footer
        </footer>
    </body>
</html>

html{
    height: 100%;
}
header{
    background-color: #000;
}
.container{
    min-height: 100%;
    display: flex;
    flex-direction: cloumn;
    background-color: #fff;
}
footer {
    flex: 1;
    background-color: #ff0;
}

方案预览

http://runjs.cn/detail/rcr6etwv

方案兼容性

pc

IE 10+
Edge 12+
Firefox 28+
Chrome 21+
Safari 6.1+
Opera 12.1+

移动端

IOS safari 7.1+
Opera mini 全线支持
Android 内置浏览器 4.4+
Blackberry browser 10+
Opera Mobile 12.1+
Chrome for Android 53+
Firefox for Android 49 +
IE mobile 11+

方案优缺点

优点

使用了css3的新特性，弹性盒子布局，方便快捷；
更少依赖置底元素的高度，这样置底元素的高度不需要知道就可以实现永久置底；
代码实现量更加少。

缺点

显而易见的就是它的兼容性了，IE阵线几乎全军覆没，只剩下10和11能够兼容；
在移动端，要注意各种APP内置浏览器对flex的支持没那么好；
就算是移动端，它的兼容性也可见一斑。

方案三，使用css的calc(),实现永久置底

本方案需要两步：

主元素使用calc设置最小高度
置底元素设置固定高度

上代码

html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RunJS</title>
    </head>
    <body>
        <header>
            this is header
        </header>
        <main class="container">
            this is container
        </main>
        <footer>
            this is footer
        </footer>
        
    </body>
</html>

.container {
    min-height: calc(100vh - 70px);
    background-color: #ff0;
}

footer {
    height: 50px;
    background-color: #f00;
}

方案预览

http://runjs.cn/detail/cj5r3srq

方案兼容性

pc

IE 9+
Edge 12+
Firefox 4+
Chrome 19+
Safari 6+
Opera 15+

移动端

IOS safari 6.1+
Opera mini 全线不支持
Android 内置浏览器 4.4+
Blackberry browser 10+
Opera Mobile 37+
Chrome for Android 53+
Firefox for Android 49 +
IE mobile 10+

学习笔记：让元素永久置底的几种方案（css only）

前言

术语解释

方案一 利用margin负值和伪元素实现永远置底

代码如下：

方案预览

方案兼容性

pc

移动端

方案优缺点

优点

缺点

方案一总结

方案二 利用flex特性实现永久置底

上代码：

方案预览

方案兼容性

pc

移动端

方案优缺点

优点

缺点

方案三，使用css的calc(),实现永久置底

上代码

方案预览

方案兼容性

pc

移动端

方案优缺点

优点

缺点

持续更新中...敬请期待

参考文章

landy2014

引用和评论

不正经的2016年

CSS团队协作规范

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高

前端开发工具

开发插件集合

CSS 现在终于支持高度 auto 过渡动画了

方案一利用margin负值和伪元素实现永远置底

方案二利用flex特性实现永久置底