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

前言

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

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

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

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

术语解释

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

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

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

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

• html和body元素设置高度100%；

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

• 置底元素设置一个固定高度

代码如下：

• html

    
        
    
    
        

            this is header
        
        

            this is main
        
        
        

            this is footer
        
    

• css

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

    
        
    
    
        

            this is header
        
        

            this is container
        
        
        

            this is footer
        
    

• css

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

    
        
        
    
    
        

            this is header
        
        

            this is container
        
        

            this is footer
        
        
    

• css

.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代码量极少

• html结构代码也简单

缺点

• 兼容性差

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

参考文章

• https://css-tricks.com/snippets/css/sticky-footer/

• https://css-tricks.com/couple-takes-sticky-footer/