微信号:uxForever

介绍:与您分享前端技术,程序猿的工作、生活,每周一早上推送一篇前端技术文章,不定时与您分享程序猿的另类生活.from 阿里巴巴信息平台前端团队.

老系统头尾统一改造所带来的端适配解决方案

2016-07-11 06:26 文生

前言

事情是这样的,某天被视觉吐槽系统的尾部没有置底

页面效果是这样的

问题分析

造成这个问题有客观原因:

  1. 用户是大屏,窗口高度太高以至于超过了内容高度

  2. footer是黑色背景,大大增加突兀感

但是问题的本质,是前端没有对 footer 做特殊处理,页面默认由上往下布局,footer 自然就是跟在内容后面。


从设计师的角度看,footer 永远在页面的最底部,应该是所有网页的标准,但是css标准制定者肯定不是设计师,不然TA一定会加个类似 position:page-end 的属性。

方案探索

方案零:

之所以是方案『零』,因为这个方案并不解决问题:

  1. 约束页面设计,在设计阶段规避内容很少的情况;

  2. 对于动态页面,由于无法完全控制内容多少,在css中设置内容区域的最小高度 min-height, 这个高度具体数值以满足主流分辨率为准。

方案一:


pro

  1. 不依赖dom结构

  2. 纯css实现,代码简单

con

不完全符合需求,页面高度超过1屏时,尾部会覆盖内容

方案二:

demo地址:http://codepen.io/anon/pen/YWWxbq

pro

  1. 纯css实现

  2. 兼容老版本IE

con

  1. footer 需确定高度

  2. 对dom结构有一定要求, footer 需嵌套在外层容器中

方案三:

和方案二类似,好处是可以把 footer 独立提出到容器外

demo地址:http://codepen.io/anon/pen/Gqqvbr


pro

  1. 纯css实现
    2. 兼容老版本IE

con

  1. footer 需确定高度

  2. 对dom结构有一定要求

方案四:

demo地址:http://codepen.io/anon/pen/XKKeVJ

pro

  1. 纯css实现

  2. 兼容老版本IE

con

  1. footer 需确定高度

  2. 对dom结构有一定要求, 而且需要增加一个额外的div

方案五:

这是纯js的方案,对窗口resize等事件做了监听

demo地址:http://codepen.io/anon/pen/YWWEZj

pro

  1. 兼容性好

  2. dom结构灵活

con

  1. 依赖js,需对窗口resize等事件做监听

  2. footer定位刷新会有延迟

方案六:

demo地址:http://codepen.io/anon/pen/QEEjEW

这个方案基于 calcvh 和  flexbox。核心思想,是让 footer 高度自动适配页面尾部的空白区域高度。

来看核心代码

代码解释

∆h = 100vh - 100%:

100vh 为可视区域高度,因为给 footer 设置了绝对定位,所以它本身并不占高度,100%就是整个页面内容的实际高度。

height: calc(∆h):

∆h 为负值,说明页面内容超过可视区域高度,height高度无效,footer 自动跟在内容后面;
∆h 为正,内容高度不足一屏,height生效,footer 填满可视区域的多余部分。

名词解释:
vh: 1vh = 1% of the height of the initial containing block.

解决了高度的问题,剩下要做的是把footer里面的内容底对齐,同时如果footer有背景的话,也不能让背景色填充整个footer,否则:

针对这个问题,可以用 flexbox,在原来的 footer 外面包一个 <div class="footer-wrap"></div> ,然后把之前应用在 footer 上的 css 挪到 footer-wrap 上,再利用flexbox的 flex-direction: column-reverse,达成最终想要的效果。

再看下兼容性:

vh:

calc:

flexbox:

支持包括IE10在内的大部分现代浏览器(除了IE9和IE8)

pro

  1. dom结构灵活,只涉及footer的改造

  2. 纯css实现

con

不兼容老版本浏览器

总结:


考虑到改造会涉及到数十个系统,所有系统逐个修改页面结构的方案是不可接受的,所以只能选择方案五和六。使用js来实现,可以保证在所有浏览器下实现效果,但是要接受定位延迟和相对差的性能,方案六的纯css方案,在IE89下平滑降级为默认跟随内容的效果,牺牲了效果,同时提供相对较优的性能。

如果是你,你会选择什么方案呢?


长按二维码,关注猿猿相抱
本篇作者:文生

 
猿猿相抱 更多文章 移动端借助Native优化前端性能 如何在 React 中做到 jQuery-free
猜您喜欢 【报名微课堂】为什么使用React作为云平台的前端框架 腾讯携手华为举办Spark论坛,诚邀业内精英9月21日相聚腾讯大厦 《Linux 工作站安全检查清单》—来自 Linux 基金会内部 事前预防很重要,这次我们聊聊监控之异常检测 IT圈装逼速成指南