AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

footer定位页面底部(代码分享)

51自学网 http://www.wanshiok.com
footer始终在页面底部,footer固定在页面底部,footer定位在页面底部

话不多说,请看代码:

<!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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持wanshiok.com!


footer始终在页面底部,footer固定在页面底部,footer定位在页面底部  
上一篇:vue数据双向绑定原理解析(get & set)  下一篇:vue父子组件的数据传递示例