详解Sticky Footer 绝对底部的两种套路


Posted in HTML / CSS onNovember 03, 2017

最近面了好几个前端,工作经验有高有低,居然都不知道绝对底部是什么,也没有人能说出一种实现方式,让我不禁感慨前端领域的良莠不齐

绝对底部,或者说 Sticky Footer,是一种古老且经典的页面效果:

当页面内容超出屏幕,页脚模块会像正常页面一样,被推到内容下方,需要拖动滚动条才能看到

而当页面内容小于屏幕高度,页脚模块会固定在屏幕底部,就像是底边距为零的固定定位

详解Sticky Footer 绝对底部的两种套路

一、经典套路

这种套路的思路是,给内容区域设置 min-height: 100%,将 footer 推到屏幕下方

然后给 footer 添加 margin-top,其值为 footer 高度的负值,就能让 footer 回到屏幕底部

HTML:

<div class="wrap">
  <div class="content">
    <p>填充内容</p>
  </div>
</div>
<div class="footer">
  <p>这是页脚</p>
</div>

CSS:

html,body {
  height: 100%;
}
    
body > .wrap {
  min-height: 100%;
}
    
.content {
  /* padding-bottom 等于 footer 的高度 */
  padding-bottom: 60px;
}
    
.footer {
  width: 100%;
  height: 60px;
  /* margin-top 为 footer 高度的负值 */
  margin-top: -60px;
}

需要注意的就是内容区域 content 的 padding、footer 的 height 和 margin, 必须保持一致

这种写法的兼容性非常好,实测 IE7 也能正常展示

但是如果页面的主体布局有其他兼容性问题,Sticky Footer 就需要做一些相应的修改

二、Flexbox

不得不说,CSS3 带来了前端的一次变革,其中 Flexbox 更是带来了网页布局的一次变革

虽然兼容性限制了 Flexbox 在国内的推广,但不可否认的是,Flexbox 是前端布局的一大趋势

HTML:

<div class="content">
  <p>填充内容</p>
  <hr />
</div>
<div class="footer">
  <p>这是页脚@WiseWrong</p>
</div>

CSS:

html, body {
  display: flex;
  height: 100%;
  flex-direction: column;
}

body > .content {
  flex: 1;
}

和经典套路相比,首先是 HTML 部分,内容区域 content 不再需要 wrap 容器

然后 CSS 部分减肥成功,仅仅使用四行代码,就解决了曾经困扰了一代人的难题

而且使用 Flexbox,就不需要限定 footer 的高度,让页面布局更加灵活

当然缺点也是显而易见的,只有 IE10 及以上的浏览器才支持 flex 布局

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
button在IE6/7下的黑边去除方案
Dec 24 HTML / CSS
修复iPhone的safari浏览器上submit按钮圆角bug
Dec 24 HTML / CSS
CSS3 滤镜 webkit-filter详细介绍及使用方法
Dec 27 HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
Sep 04 HTML / CSS
CSS3的一个简单导航栏实现
Aug 03 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
canvas实现图片镜像翻转的2种方式
Jul 22 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 #HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 #HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 #HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 #HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 #HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 #HTML / CSS
CSS3中伪元素::before和::after的用法示例
Sep 18 #HTML / CSS
You might like
PHP写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
PHP图片上传代码
2013/11/04 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
2015/09/01 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
javascript基础知识分享之类与函数化
2016/02/13 Javascript
微信小程序 textarea 详解及简单使用方法
2016/12/05 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
2017/09/22 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
Python3中的2to3转换工具使用示例
2015/06/12 Python
八大排序算法的Python实现
2021/01/28 Python
详解字典树Trie结构及其Python代码实现
2016/06/03 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
Python一键安装全部依赖包的方法
2019/08/12 Python
python实现监控阿里云账户余额功能
2019/12/16 Python
求职信模板怎么做
2014/01/26 职场文书
高中打架检讨书
2014/02/13 职场文书
教师新年寄语
2014/04/03 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
公司辞职信模板
2015/05/13 职场文书
apache ftpserver搭建ftp服务器
2022/05/20 Servers