UDN-企业互联网技术人气社区

板块导航

浏览  : 282
回复  : 2

[原生js] 对“粘连”footer布局的思考和总结

[复制链接]
芭芭拉的头像 楼主
发表于 2016-12-31 15:51:56 | 显示全部楼层 |阅读模式
  经典的“粘连”footer布局就是。我们有一块内容 <main> 。当 <main> 的高度足够长的时候,紧跟在 <main> 后面的元素 <footer> 会跟在 <main> 元素的后面。当 <main> 元素比较短的时候(比如小于屏幕的高度),我们期望这个 <footer> 元素能够“粘连”在屏幕的底部。如下图所示:

  当 main 足够长时
4.jpg

  当 main 比较短时
3.jpg

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

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

  当屏幕足够高的时候
2.jpg

  当屏幕比较低的时候
1.jpg

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

  安卓上键盘弹起会对 absolute 和 fixed 产生影响;

  我们的绝对定位的元素是使用的 bottom 相对于屏幕的底部定位;

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

  使用正常文档流的元素包裹绝对定位的元素;

  绝对定位元素的父级元素应该有一个 min-height 防止,父级元素太低时,绝对定位元素“溢出”父级元素;(min-height >= 绝对定位元素 + bottom);

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

  1.使用 vh 单位

  先来了解下 vh 和 vw 这两个单位。
  1. vh
  2. vw
复制代码

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

  示例代码如下:
  1. <body>
  2.     <div class="item1"></div>
  3.     <div class="item2"></div>
  4.     <div class="item3">
  5.         <div class="btn-item">你好</div>
  6.     </div>
  7. </body>
  8. css代码如下:

  9. * {
  10.     margin: 0;
  11.     padding: 0;
  12. }

  13. body {
  14.     /*主要就是这里获取视窗口的高度*/
  15.     min-height: 100vh;
  16.     display: flex;
  17. }

  18. .item1 {
  19.     height: 100px;
  20.     background-color: #ddd
  21. }

  22. .item2 {
  23.     height: 300px;
  24.     background-color: #fea0a0
  25. }

  26. .item3 {
  27.     /*防止绝对定位的元素溢出父级元素*/
  28.     min-height: 30px !important;
  29.     border: 1px solid #481eff;
  30.     position: relative;
  31.     height: 0;
  32.     -webkit-box-flex: 1;
  33.     -webkit-flex: 1;
  34.     -moz-box-flex: 1;
  35.     -ms-flex: 1;
  36.     flex: 1;
  37.     -webkit-flex-basis: 0;
  38.     -ms-flex-preferred-size: 0;
  39.     flex-basis: 0;
  40.     max-height: 100%;
  41. }

  42. .btn-item {
  43.     position: absolute;
  44.     bottom: 10px;
  45.     border: 1px solid #000;
  46. }
复制代码

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

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

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

  就是在dom树渲染完成以后给 body 设置高度未屏幕的高度。为了避免不必要的“重绘”或者是“重排”在head标签中添加如下js。
  1. var callback = function(){
  2.     document.body.style.height=window.screen.height+'px';
  3. };

  4. //是否是页面加载触发绑定了事件
  5. if ( document.readyState === "complete" || (document.readyState !== "loading" && !document.documentElement.doScroll) ) {
  6.     callback();
  7. } else {
  8.     //DOMContentLoaded 仅支持ie9+ 和移动端  <=ie8 使用 onreadystatechange  可以监听dom是否加载完毕
  9.     document.addEventListener("DOMContentLoaded", callback);
  10. }
复制代码

  使用 jQuery 或者是 Zepto 的方法,仍然在head标签中添加如下js。
  1. $(function(){
  2.     $('body').height($(window).height());
  3. })
复制代码

  所以在我们的项目中结合弹性盒布局和添加简单的动态js计算屏幕的高度。就可以完美实现我们项目中需要的布局。
  1. body {
  2.     /*使用js动态计算就可以不使用vh单位*/
  3.     /*min-height: 100vh;*/
  4.     display: flex;
  5. }
复制代码

相关帖子

发表于 2016-12-31 15:52:25 | 显示全部楼层
还是挺有借鉴意义的
使用道具 举报

回复

发表于 2016-12-31 20:52:15 | 显示全部楼层
LZ敢整点更有创意的不?兄弟们等着围观捏~
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部