详解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实现背景模糊的三种方式
Mar 09 HTML / CSS
CSS3弹性盒模型开发笔记(三)
Apr 26 HTML / CSS
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
Jun 03 HTML / CSS
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
CSS3实现网站商品展示效果图
Jan 18 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
用canvas实现图片滤镜效果附演示
Nov 05 HTML / CSS
使用phonegap获取设备的一些信息方法
Mar 31 HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 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 多行多列显示
2009/08/15 PHP
PHP操作xml代码
2010/06/17 PHP
JS的数组的扩展实例代码
2008/07/09 Javascript
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
vue-router路由与页面间导航实例解析
2017/11/07 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
小程序实现多列选择器
2019/02/15 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
Python中IPYTHON入门实例
2015/05/11 Python
Php多进程实现代码
2018/05/07 Python
Python中的集合介绍
2019/01/28 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
详解python播放音频的三种方法
2019/09/23 Python
如何基于python生成list的所有的子集
2019/11/11 Python
Python list运算操作代码实例解析
2020/01/20 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
pip/anaconda修改镜像源,加快python模块安装速度的操作
2021/03/04 Python
Dr. Martens马汀博士澳大利亚官网:马丁靴鼻祖
2019/07/02 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
Oracle快照(snapshot)
2015/03/13 面试题
人事主管的岗位职责
2013/11/16 职场文书
高中化学教学反思
2014/01/13 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
幼师辞职信范文大全
2015/05/12 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers