详解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 相关文章推荐
css3的transition属性详解
Dec 15 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 HTML / CSS
详解CSS3浏览器兼容
Dec 14 HTML / CSS
把富文本的回车转为br标签
Aug 09 HTML / CSS
HTML5 画布canvas使用方法
Mar 18 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 13 HTML / CSS
Canvas如何做个雪花屏版404的实现
Sep 25 HTML / CSS
CSS文本阴影 text-shadow 悬停效果详解
May 25 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 的异常处理程序
2014/06/22 PHP
PHP生成器简单实例
2015/05/13 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
php报错502badgateway解决方法
2019/10/11 PHP
Javascript实例教程(19) 使用HoTMetal(2)
2006/12/23 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
详解利用exif.js解决ios手机上传竖拍照片旋转90度问题
2016/11/04 Javascript
详解node中创建服务进程
2017/05/09 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
Vue动画事件详解及过渡动画实例
2019/02/09 Javascript
JS回调函数深入理解
2019/10/16 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
原生javascript制作的拼图游戏实现方法详解
2020/02/23 Javascript
python文件的md5加密方法
2016/04/06 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
wxPython实现整点报时
2019/11/18 Python
Python使用configparser库读取配置文件
2020/02/22 Python
python中安装django模块的方法
2020/03/12 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
StubHub西班牙:购买和出售全球活动门票
2017/06/05 全球购物
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
英国和国际包裹递送:ParcelCompare
2019/08/26 全球购物
财务经理岗位职责
2013/11/09 职场文书
淘宝中秋节活动方案
2014/01/31 职场文书
公司司机岗位职责
2014/02/07 职场文书
我为自己代言广告词
2014/03/18 职场文书
2015年大学学生会工作总结
2015/05/13 职场文书
python实现手机推送 代码也就10行左右
2022/04/12 Python