详解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 相关文章推荐
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 HTML / CSS
使用HTML5拍照示例代码
Aug 06 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
HTML页面中添加Canvas标签示例
Jan 01 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
Feb 18 HTML / CSS
跨域修改iframe页面内容详解
Oct 31 HTML / CSS
css3带你实现3D转换效果
Feb 24 HTML / CSS
HTML中的表格元素介绍
Feb 28 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
基于mysql的论坛(6)
2006/10/09 PHP
PHP cron中的批处理
2008/09/16 PHP
关于php curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
PHPCMS手机站伪静态设置详细教程
2017/02/06 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
js模拟弹出效果代码修正版
2008/08/07 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
jquery复选框checkbox实现删除前判断
2014/04/20 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
JS打印组合功能
2016/08/04 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
[01:07:11]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
Python pymongo模块常用操作分析
2018/09/01 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
pycharm 对代码做静态检查操作
2020/06/09 Python
pandas针对excel处理的实现
2021/01/15 Python
html5的新增的标签和废除的标签简要概述
2013/02/20 HTML / CSS
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
一组SQL面试题
2016/02/15 面试题
文体活动实施方案
2014/03/27 职场文书
遗产继承公证书
2014/04/09 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
2019军训心得体会
2019/06/27 职场文书
Go timer如何调度
2021/06/09 Golang
仅用几行Python代码就能复制她的U盘文件?
2021/06/26 Python