js 控制 footer 下沉

最新推荐文章于 2022-03-25 09:37:12 发布

weixin_33805557

最新推荐文章于 2022-03-25 09:37:12 发布

阅读量138

点赞数 1

原文链接：https://my.oschina.net/lemos/blog/3007703

版权

为什么80%的码农都做不了架构师？>>>

/**
 * footer 下沉
 */
handleFooter();

window.addEventListener('resize', handleFooter);

function handleFooter() {
   var bodyHeight = document.body.offsetHeight ;//获取文档的的高度
   var windowHeight = window.innerHeight;     //获取窗口的的高度
   var footer = document.querySelector("footer");

   if(windowHeight>bodyHeight ){  //文档高度小于窗口高度时，给footer绝对定位。position:absolute;bottom:0;
      footer.style.marginTop = windowHeight - bodyHeight + 56 + 'px';
   } else {
      footer.style.positon = "";
      footer.style.bottom = "";
   }
}

转载于:https://my.oschina.net/lemos/blog/3007703