首页/ 填坑/ 文章详情

Footer 底部框自适应置底位置,给你一个完整的布局

footer 底部框 自适应 布局 发布于 2020-10-10

 初生的个人博客网站,内容少,连首页的展示区都无法填充满。快速填充,ctrl+c, ctrl+v,如果这样,直接关了网站启不是更好么? 

制作原创的文章,从立题,找素材,编辑,校验,发布,一个完整的流程下来,至少1个小时以上的工作量。一篇阅读5分钟文章,往往需要博主百忙之外抽出空余的时间,呕心沥血的创作,纯碎的用爱去发电。如果去抄袭、复制,人人皆如此,不仅为毁了别人,更毁了自己

在内容不足的情况下,网站需要适当的调整,砍掉部分功能。因而导致页面布局走样,辛辛苦苦做网站,启能忍受

网站布局

HTML<div class="header">//do something</div>
<div class="wrap">//do something</div>
<div class="footer">//do something</div>

网站的布局由上到下,布局发生走样的原因,只因没有足够多的内容支撑起屏幕的高度,导致 footer 底部框没有正常置底,暴露出网页的边界,实属难看。

自适应解决方案

JS /**
  * 设置底部位置
  * @method setFooterPostion
  * @param {Number} offset 容差值
  * @param {Number} delay 延迟触发时间
  */
  var setFooterPostion = function (offset,delay) {
      var offset = offset || 30;
      var delay = delay || 100;
      setTimeout(function () { //延迟触发事件,防止页面尚未加载完毕,获取的值不正确
          var height = $(window).height(); //获取屏高
          var workspace = $('.header').height() + $('.wrap').height();
          var footer = $('.footer').height();
          if(height - workspace > footer + offset) {
              $('.footer').css({'position':'fixed','bottom':'0','left': '0'});
          }
      }, delay);
  }

为什么代码使用了setTimeout定时器,主要考虑到网页加载时,图片资源没有加载进来,导致获取高度不对。

文章评论0 records

最新 最早

0

最新评论Latest comments

big2catbig2cat 08-27 16:11
然而没什么用,smartpss不兼容老录像机,就算能看回放,很多时间点在回放里也看不到
HentaiCatHentaiCat 2020-12-30 10:22
考科目二全程很紧张,考了三次才过,有次侧方入库直接pass,100分扣完,呜呜呜~
猫猫酱猫猫酱 2020-11-12 10:56
一入多肉深似海,说多都是泪
soulkunsoulkun 2020-11-05 15:54
IconFont的图标真的很好用!!!
无限链霉球菌无限链霉球菌 2020-11-03 11:41
药店,了解一下(`・ω・´)