Sticky Foolter 几种实现方式

PrototypeZ 发布于2019-08-02 15:13 / 3033人阅读

摘要：但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。只需要几行代码就可以实现，而且像上面计算或添加额外的元素。

CSS实现Sticky Footer 什么是 “Sticky Footer”

所谓 “Sticky Footer”，并不是什么新的前端概念和技术，它指的就是一种网页效果： 如果页面内容不足够长时，页脚固定在浏览器窗口的底部；如果内容足够长时，页脚固定在页面的最底部。但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。

先来看看下面的例子, 代码如下


    顶部


    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分


    
    底部

.header {
    background-color: #3498DB;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
}
.main {
    overflow: auto;
    box-sizing: border-box;
}

.footer {
    background-color: #ECF0F1;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

细心读者应该发现问题了,底部 footer 位置会随着主体内容高度变化自动变化,当主体内容小于视口的高度时, footer 并没有黏贴在底部. 那么解决这样问题尼?

negative margin


    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分


    
    底部

html,
body {
    height: 100%;
}
.header{
    background-color: #3498DB;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    position: fixed;
    width: 100%;
}
.main {
    min-height: 100%;
    overflow: auto;
    box-sizing: border-box;
    padding-bottom: 50px;
    padding-top: 50px;
    margin-bottom: -50px;
}

.footer {
    background-color: #ECF0F1;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

固定高度解决方案

使用如下属性

min-height

calc

calc() 是 CSS3引入的,让你在声明CSS属性值时可以执行一些计算.
它可以用在一些数值场合; 详细可以查阅这里 MDN

vh(Viewport Height): 顾明思议,表示的是视口的高度.

详细信息以及兼容可以查阅这里: caniuse

针对上面的代码进行修改,如下

.main {
    min-height: calc(100vh - 50px - 50px);
}

这样完成我们期望的,但是有个缺点就是每次我们都要去计算 header、footer 的高度.
这显然不完美, 假如DOM结构层级多的话,需要计算的内容更多.

absolute

absolute相信大家熟悉不过了,这里就不在啰嗦了; 这里注意这个就行, absolute 元素其位置是根据什么来进行计算并进行定位的?


    头部


    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分
    中间部分


    
    底部

html{
    position: relative;
    min-height: 100%;
}
body{
    margin-bottom: 50px;
}
.header {
    background-color: #3498DB;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
}
.main {
    overflow: auto;
}

.footer {
    position: absolute;
    bottom:0;
    width: 100%;
    background-color: #ECF0F1;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

代码是不是很简单,这里主要 position的应用：

1 默认情况下, 当给某个元素设置为 position:absolute 时, 在祖先元素没有设置 position: absolute or fixed or relative
时, 其默认相对于初始包含块( initial containing block ).

2 什么初始化包含块?

The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin;

这是w3c对包含块介绍, 这段话大概意思, 根元素(document)为默认为初始化包含块,其初始化块的大小为视口的大小.

理解这几个概念后,我们再来看上面的代码就一目了然了!

    html{
        position: relative;
        min-height: 100%;
    }

    body{
        margin-bottom: 50px;
    }

position:relative 改变包含块,让设置absolute元素根据html元素来进行定位.

min-height: 保证在内容不足视口时, footer能黏贴在底部.

margin-bottom 值为 footer 元素的高度,这样保证内容区域不会被footer遮住.

Flexbox

Flexbox是最完美的方案。只需要几行CSS代码就可以实现，而且像上面计算或添加额外的HTML元素。

Flexbox介绍可以查阅阮一峰老师这边文章
修改代码如下:


    
        顶部
    
    
        中间部分
        中间部分
        中间部分
        中间部分
        中间部分
        中间部分
        中间部分
        中间部分
        中间部分
        中间部分
        中间部分
        中间部分
        中间部分
        中间部分
        中间部分
    
    
        
        底部

html,
body {
    height: 100%;
}
.container {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.header {
    background-color: #3498DB;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
}

.main {
    overflow: auto;
    box-sizing: border-box;
    flex: 1;
}

.footer {
    background-color: #ECF0F1;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

最终效果如下:

negative =margin、固定宽度、absolute 都依赖底部高度为固定.

一般推荐使用 flex box 实现方式; 具体用那种可以根据具体场景来使用.

云服务器 GPU云服务器几种方式服务器托管方式有几种 js继承的几种方式 java线程池几种方式

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

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

Sticky Foolter 几种实现方式

摘要：但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。只需要几行代码就可以实现，而且像上面计算或添加额外的元素。 CSS实现Sticky Footer 什么是 Sticky Footer 所谓 Sticky Footer，并不是什么新的前端概念和技术，它指的就是一种网页效果：如果页面内容不足够长时，页脚固定在浏览器窗口的底部；如果内容足够长时，页脚固定在页面的最底部。但如果网页内...

张汉庆 2019-08-30 11:03 评论0 收藏0
学习笔记：让元素永久置底的几种方案（css only）

摘要：我们权且把这种解决方案叫术语解释顾名思义就是使用来实现有粘性的置底元素。下面就为大家讲讲几种解决方案，以及这些解决方案的优缺点和兼容性。前言很多同学在使用css+html写页面的时候，可能会遇到这样的场景：页面除了头部和底部外，中间部分的内容为空时，页面就会出现底部向上顶，也就是头部和底部黏在一起了。最近开发页面，也遇到了这个问题，经过查阅很多文章和资料后，整理出这篇文章，希望...

caikeal 2019-08-30 13:09 评论0 收藏0
那些年，碰上过的面试题

摘要：元素在跨越特定阈值前为相对定位，之后为固定定位。和简单介绍和，哪个会触发哪个触发顺序，哪个能够避免，哪个时尽量减少而不可能避免，哪些操作会触发阮一峰动画动画与动画区别性能区别性能优化动画性能优化动画介绍后续还会继续进行面试题的积累记录一下最近碰上的面试题 js篇介绍一下Array的API/方法，具体到返回值和参数 join / slice / splice / sort / pu...

bitkylin 2019-08-29 16:24 评论0 收藏0
那些年，碰上过的面试题

摘要：元素在跨越特定阈值前为相对定位，之后为固定定位。和简单介绍和，哪个会触发哪个触发顺序，哪个能够避免，哪个时尽量减少而不可能避免，哪些操作会触发阮一峰动画动画与动画区别性能区别性能优化动画性能优化动画介绍后续还会继续进行面试题的积累记录一下最近碰上的面试题 js篇介绍一下Array的API/方法，具体到返回值和参数 join / slice / splice / sort / pu...

nicercode 2019-08-26 12:12 评论0 收藏0
【前端词典】5 种滚动吸顶实现方式的比较[性能升级版]

摘要：用于获得当前元素到定位父级顶部的距离偏移值。后来在项目中总会遇到滚动吸顶的效果需要实现，现在我将我知道的种滚动吸顶实现方式做详细介绍。有兼容性问题，在微信浏览器某些版本中的值会为，于是乎也就有了第三种方案的兼容性写法。修改版预览这篇文章是三天前写就的，有大佬给我提了一些修改意见，我觉得这个意见确实中肯。所以就有了这个升级的修改版本。代码同步更新到 GitHub 了。修改内容如下：添加...

happyfish 2019-05-23 17:31 评论0 收藏0