footer定位页面底部（代码分享）

2019-11-19 17:16:16

字体：大中小

来源：转载

供稿：网友

话不多说，请看代码：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>footer定位</title><style>  *{    margin:0;    padding: 0;  }  .box{    width: 100%;    height:300px;    background: pink;    margin-bottom: 30px;  }  .footer{    background: red;    width: 100%;    height:30px;  }</style></head><body><div class="main"><!--头部开始-->  <div class="box">  </div></div><!--底部--><div class="footer"></div><script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.js'></script></body></html><script>$(document).ready(function () {  var theWindow = $(window);  function resized() {    var windowSize=window.devicePixelRatio;  if(windowSize==1){     var hg2 = $(window).height();    var main = $('.main').outerHeight();    var hg4 = $('.footer').outerHeight();    var hg=hg2-hg4      if( hg > main){        $('.footer').css({"position":'fixed','bottom':0,'left':0,"z-index":999,"width":"100%"});      }else{        $('.footer').css({"position":'static'});      }  }else{    $('.footer').css({"position":'static'});  }  }  theWindow.resize(function () {    resized();  }).trigger('resize');});</script>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：vue数据双向绑定原理解析（get & set)

下一篇：vue父子组件的数据传递示例