Sticky Footer,完美的绝对底部
写在前面
做过网页开发的同学想必都遇到过这样尴尬的排版问题:
在主体内容不足够多或者未完全加载出来之前,就会导致出现(图一)的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部。但是,我们期望的效果是页脚应该一直处于页面最底部(如图二):
笔者最近在项目中也遇到过这样的场景,在寻找最佳解决方案的过程中,了解到了 “Sticky Footer” 这个名词。
本文将带大家重新认识这个常见的网页效果,以及一些可行的实现方案。
什么是 “Sticky Footer”
所谓 “Sticky Footer”,并不是什么新的前端概念和技术,它指的就是一种网页效果:
如果页面内容不足够长时,页脚固定在浏览器窗口的底部;如果内容足够长时,页脚固定在页面的最底部。
总而言之,就是页脚一直处于最底,效果大致如图所示:
当然,实现这种效果的方法有很多种,其中有通过脚本计算的,有通过 CSS 处理的,脚本计算的方案我们不在本文探讨。
下面我们看看有哪些通过 CSS 可以实现且适用于移动端开发的方案,并分析其中的利弊。
如何实现
假设我们页面的 HTML 结构是这样:
1
2
3
4
|
<div class="wrapper">
<div class="content"><!-- 页面主体内容区域 --></div>
<div class="footer"><!-- 需要做到 Sticky Footer 效果的页脚 --></div>
</div>
|
实现方案一:absolute
通过绝对定位处理应该是常见的方案,只要使得页脚一直定位在主容器预留占位位置。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
html, body {
height: 100%;
}
.wrapper {
position: relative;
min-height: 100%;
padding-bottom: 50px;
box-sizing: border-box;
}
.footer {
position: absolute;
bottom: 0;
height: 50px;
}
|
这个方案需指定 html、body 100% 的高度,且 content 的 padding-bottom
需要与 footer 的 height
一致。
实现方案二:calc
通过计算函数 calc 计算(视窗高度 - 页脚高度)赋予内容区最小高度,不需要任何额外样式处理,代码量最少、最简单。
1
2
3
4
5
6
|
.content {
min-height: calc(100vh - 50px);
}
.footer {
height: 50px;
}
|
如果不需考虑 calc()
以及 vh
单位的兼容情况,这是个很理想的实现方案。
同样的问题是 footer 的高度值需要与 content 其中的计算值一致。
实现方案三:table
通过 table 属性使得页面以表格的形态呈现。
1
2
3
4
5
6
7
8
9
10
11
12
|
html, body {
height: 100%;
}
.wrapper {
display: table;
width: 100%;
min-height: 100%;
}
.content {
display: table-row;
height: 100%;
}
|
需要注意的是,使用 table 方案存在一个比较常见的样式限制,通常 margin、padding、border 等属性会不符合预期。
笔者不建议使用这个方案。当然,问题也是可以解决的:别把其他样式写在 table 上。
实现方案四:Flexbox
Flexbox 是非常适合实现这种效果的,使用 Flexbox 实现不仅不需要任何额外的元素,而且允许页脚的高度是可变的。
虽然大多数 Flexbox 布局常用于水平方向布局,但别忘了实际上它也可用于垂直布局,所以你需要做的是将垂直部分包装在一个 Flex 容器中,并选择要扩展的部分,他们将自动占用其容器中的所有可用空间。
1
2
3
4
5
6
7
8
9
10
11
|
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
|
需要注意的是想要兼容各种系统设备,需要兼顾 flex
的兼容写法。
写在最后
以上几种实现方案,笔者都在项目中尝试过,每个实现的方法其实大同小异,同时也都有自己的利弊。
其中有的方案存在限制性问题,需要固定页脚高度;其中有的方案需要添加额外的元素或者需要 Hack 手段。同学们可以根据页面具体需求,选择最适合的方案。
当然,技术是不断更新的,也许还有很多不同的、更好的方案。但相信大家最终目都是一样的,为了更好的用户体验!
参考资料:
https://css-tricks.com/couple-takes-sticky-footer/
http://www.w3cplus.com/css3/css-secrets/sticky-footers.html
Sticky Footer,完美的绝对底部的更多相关文章
- sticky footer布局,定位底部footer
其作用就是当内容区域比较少时,让footer也能正常定位到底部,以前我们使用js来达到这种效果,其实用css也是完全可以的 <!DOCTYPE html> <html lang=&q ...
- Sticky footer经典布局--绝对底部布局
原文转载于:https://cnodejs.org/topic/56ebdf2db705742136388f71 何为Sticky footer布局? 我们常见的网页布局方式一般分为header(页头 ...
- 【转载】CSS Sticky Footer: 完美的CSS绝对底部
下面是我找到的一个比较完美的方法,来自国外的设计达人,纯CSS,可以实现: 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. <div id="wrap&qu ...
- CSS Sticky Footer: 完美的CSS绝对底部
CSS的简单在于它易学,CSS的困难在于寻找更好的解决方案.在CSS的世界里,似乎没有完美这种说法.所以,现在介绍的CSS绝对底部,只是目前个人见过的方案中比较完美的吧. 先说我们为什么会使用到这个C ...
- 【css技能提升】完美的 Sticky Footer 布局
在总结之前所做的项目时,遇到过下面这种情况. 在主体内容不足够多或者未完全加载出来之前,就会导致出现左边的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我们期望的效果是页脚 ...
- Sticky Footer 绝对底部的两种套路
最近面了好几个前端,工作经验有高有低,居然都不知道绝对底部是什么,也没有人能说出一种实现方式,让我不禁感慨前端领域的良莠不齐 绝对底部,或者说 Sticky Footer,是一种古老且经典的页面效果: ...
- 两种方式实现sticky footer绝对底部
一.什么是sticky footer 如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送,我们看到的效果就如下面两张图这样.这种效果基本是无处不在的,很受欢迎. ...
- 两种最常用的Sticky footer布局方式
Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块.内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布.当页面内 ...
- 前端经典布局:Sticky footer 布局
什么是Sticky footer布局?前端开发中大部分网站,都会把一个页面分为头部区块.内容区块.页脚区块,这也是比较.往往底部都要求能固定在屏幕的底部,而非随着文档流排布.要实现的样式可以概括如下: ...
随机推荐
- java属性为什么没多态,而是方法多态
定义 java多肽的特性:方法具有多态性,属性却没有. 准备 基类: 子类: 测试类: 结果: 分析如下 父类 a=new 子类,实际对象时子类.由于向上转型,我们可以用父类在编译期间代替子类,使得编 ...
- 膨胀、腐蚀、开、闭(matlab实现)
膨胀.腐蚀.开.闭运算是数学形态学最基本的变换. 本文主要针对二值图像的形态学 膨胀:把二值图像各1像素连接成分的边界扩大一层(填充边缘或0像素内部的孔): B=[0 1 0 1 1 1 ...
- 优化IDEA启动速度,快了好多。后面有什么优化点,会继续往里面添加
1.优化启动 修改bin/idea.exe.vmoptions文件如下: -Xms256m 初始堆大小-Xmx384m 最大堆大小 -XX:+UseParNewGC 使用并行收集算法 2. ...
- [转]使用 LDAP OU 限制访问
使用 LDAP OU 限制访问 http://www-01.ibm.com/support/knowledgecenter/api/content/SSEP7J_10.2.2/com.ibm.swg. ...
- Codeforces 219D Choosing Capital for Treeland 2次DP
//选择一个根使得变换最少边的方向使得能够到达所有点#include <map> #include <set> #include <list> #include & ...
- 判断 js 的 Array 和 Object
https://my.oschina.net/ohcoding/blog/470952?p=1 var a = ['hello','world']; console.log(typeof a); // ...
- 使用div实现progress进度条
在百度上搜了很多方法去修改HTML5 progress的样式,然而并没有实现. 所以自己用div实现了一个. 简单粗暴(*^-^*) 可以在CSS里改样式,可以JS里改进度. <div cla ...
- 获取struts迭代list在页面显示的数据
js代码: function modifyPactMoney(){ var table=$("#pactfee"); var trs=table.find("tr&quo ...
- jQuery-niceScroll使用中父子div都存在滚动条导致错位的问题
1.做项目时因为客户要求改变了项目的整体样式,所以导致浏览器自带的滚动条样式与项目的样式风格格格不入,所以要使用一个滚动条插件来替换浏览器自带的滚动条,我在网上搜了下,发现niceScroll这个滚动 ...
- ubuntu下使用mysql的一点笔记
因为使用的是apt-get安装的.所以,mysql的安装路径在/var/lib/mysql下面 在普通用户下,cd /var/lib/mysql,居然提示: bash:cd:mysql Permiss ...