资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往

首页/文章专栏/学习笔记：让元素永久置底的几种方案（css only）

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

caikeal 发布于2019-08-30 13:09 / 1926人阅读

摘要：我们权且把这种解决方案叫术语解释顾名思义就是使用来实现有粘性的置底元素。下面就为大家讲讲几种解决方案，以及这些解决方案的优缺点和兼容性。

前言

很多同学在使用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



    
        
        RunJS
    
    
        
            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/

GPU云服务器云服务器最基本的几种 html的几种轮播 js的几种数据类型 js缓存的几种方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115340.html

CSS开发

摘要：译十六进制颜色揭秘原文地址原文作者译文出自掘金翻译计划本文永久链接教程入门篇关于是一款进行栅格布局的辅助工具，它让开发者摆脱了冗杂的数学计算，同时降低了样式与结构的耦合程度。【译】CSS 十六进制颜色揭秘原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 译文出自：掘金翻译计划本文永久链接：https://github.com/xitu/...

warkiz 2019-08-30 13:54 评论0 收藏0
css - 收藏集 - 掘金

摘要：绝对底部前端掘金来自国外的设计达人，纯，可以实现当正文内容很少时，底部位于窗口最下面。有效解决图片使用单位边角缺失的问题前端掘金起因在移动端使用布局时图片也需要用单位。 CSS 绝对底部 - 前端 - 掘金来自国外的设计达人，纯CSS，可以实现: 当正文内容很少时，底部位于窗口最下面。当改变窗口高度时，不会出现重叠问题。甚至，创造该CSS的人还专门成立一个网站介绍这个CSS底部布局方案...

phpmatt 2019-08-29 12:41 评论0 收藏0
前端空间 - 收藏集 - 掘金

摘要：封装手写的方笔记使用检测文件前端掘金副标题可以做什么以及使用中会遇到的坑。目的是帮助人们用纯中文指南实现复选框中多选功能前端掘金作者缉熙简介是推出的一个天挑战。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金译者注：本文作者是著名 JavaScript BDD 测试框架 Chai.js 源码贡献者之一，Chai.js 中会遇到很多异常处理...

you_De 2019-08-29 12:34 评论0 收藏0
前端空间 - 收藏集 - 掘金

摘要：封装手写的方笔记使用检测文件前端掘金副标题可以做什么以及使用中会遇到的坑。目的是帮助人们用纯中文指南实现复选框中多选功能前端掘金作者缉熙简介是推出的一个天挑战。深入理解 JavaScript Errors 和 Stack Traces - 前端 - 掘金译者注：本文作者是著名 JavaScript BDD 测试框架 Chai.js 源码贡献者之一，Chai.js 中会遇到很多异常处理...

lwx12525 2019-08-20 16:35 评论0 收藏0
SegmentFault 技术周刊 Vol.38 - 神奇的 CSS

摘要：层叠即表示允许以多种方式来描述样式，一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用后，将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 评论0 收藏0