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

迈不过友情╰ 2022-10-10 15:45 305阅读 0赞

前言

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

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

方案预览

方案兼容性

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;

方案预览

方案兼容性

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;

方案预览

方案兼容性

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结构代码也简单

缺点

兼容性差

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

参考文章

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关图片底侧空白缝隙解决方案（HTML、CSS）

相关 CSS组件置顶/置底/透明/堆叠

相关 css伪类元素：after 的多功能用法——任意大小的底边框

相关 HTML5——CSS学习笔记（10）css重置样式

相关 footer.php置底,CSS实现Footer置底的五种方式的分享

相关 html 标签置底,学习笔记：让元素永久置底的几种方案（css only）

相关 html中内圆角代码,html – 使用CSS的内圆角底半径

相关使用CSS实现元素置灰

相关 html最佳实践－CSS置顶，JS置尾

相关在有序数据表中实现多记录上移下移置顶置底算法思路