“粘连”footer布局的思考和总结

经典的”粘连”footer布局

参考文章链接在文章末尾,简单的语言总结如下:

经典的“粘连”footer布局就是。我们有一块内容<main>。当<main>的高度足够长的时候,紧跟在<main>后面的元素<footer>会跟在<main>元素的后面。当<main>元素比较短的时候(比如小于屏幕的高度),我们期望这个<footer>元素能够“粘连”在屏幕的底部。如下图所示:

main足够长时

006tNc79jw1fb5jeq3n6tj30ga0o8tcz

main比较短时

006tNc79jw1fb5jeq4veej30f80oedjx

上面布局的实现方法在参考文章中已经有提到。下面主要探讨我们项目中遇到的情况:

我们需要实现的布局就是 按钮“提交”所在的区域能够自由伸缩。当屏幕较低时,最就是“提交”按钮和表单所在的区域接触或者有一定的间隙。 示例图就是下面的:

当屏幕足够高的时候

006tNc79jw1fb5j14xkc2j30du0o8adt

当屏幕比较低的时候

006tNc79jw1fb5j153896j30da0g4q5g

上面的布局在移动端需要考虑以下因素对布局的影响:

  1. 安卓上键盘弹起会对absolutefixed产生影响;
  2. 我们的绝对定位的元素是使用的bottom相对于屏幕的底部定位;

为了解决以上的两个问题的解决方案:

  1. 使用正常文档流的元素包裹绝对定位的元素;
  2. 绝对定位元素的父级元素应该有一个min-height防止,父级元素太低时,绝对定位元素“溢出”父级元素;(min-height >= 绝对定位元素 + bottom);

根据“粘连”footer布局的思想,结合弹性盒布局。我们需要的这种布局可以有两种方式,分别介绍如下:

1.使用vh单位

先来了解下vhvw这两个单位。

  1. vh相对于视口的高度。视口被均分为100单位的vh。
  2. vw相对于视口的宽度。视口被均分为100单位的vw。

上面两个单位通俗的意义就是在css中获取当前屏幕的高度和宽度(不通过js计算)。

示例代码如下:

css代码如下:

以上就是完全使用css来实现我们项目中布局的方法,但是这个方法有一个很明显的缺点就是vh单位的兼容性问题。兼容列表如下:

006tNc79jw1fb5lq7ayohj318i07qwg7

因为兼容性问题,纯css的方法在我们的项目中使用还是不现实。但是我们想下问题的本质:在使用弹性盒的基础上,我们唯一需要做的就是知道弹性盒元素的高度(就是我们项目中屏幕的高度)。

2.js简单计算满足兼容问题。

就是在dom树渲染完成以后给body设置高度未屏幕的高度。为了避免不必要的“重绘”或者是“重排”在head标签中添加如下js。

使用 jQuery 或者是 Zepto 的方法,仍然在head标签中添加如下js。

所以在我们的项目中结合弹性盒布局和添加简单的动态js计算屏幕的高度。就可以完美实现我们项目中需要的布局。

参考文章:

因为是一个

cssstickyfooter.com
ryanfait.com/sticky-footer
css-tricks.com/snippets/css/sticky-footer
pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way
mystrd.at/modern-clean-css-sticky-footer


966493170-578aeb5ec3ed0_articlex

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

1 2 收藏 1 评论

关于作者:zhiqiang21

做认为对的事情,如果可能是错的,那就做认为自己承受得起的事情! 个人主页 · 我的文章 · 11 ·      

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部