首页/ 填坑/ 文章详情

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

凡心的仙人凡心的仙人 03-18 14:35
谢谢你了!
rantrismrantrism 2023-04-03 11:27
您好~我是腾讯云开发者社区运营,关注了您分享的技术文章,觉得内容很棒,我们诚挚邀请您加入腾讯云自媒体分享计划。完整福利和申请地址请见:https://cloud.tencent.com/developer/support-plan 作者申
唐牛才是食神唐牛才是食神 2022-06-15 10:51
(*°▽°*)八(*°▽°*)♪,解决了
唐牛才是食神唐牛才是食神 2022-06-15 10:49
发现不得了的东西,今晚回去好好研究下...
胖螺胖螺 2022-02-04 00:58
( ゜- ゜)つロ 在写了在写了。看到也有些感慨。因为站长前年在我原博客的留言,让我毅然选择去深造,选择读研,曾经我想过挺多东西的,还是自己本专业的适合我自己。在这先表达感谢。新年快乐!