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


Posted in Javascript onMarch 07, 2017

话不多说,请看代码:

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

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

Javascript 相关文章推荐
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
javascript常见操作汇总
Sep 03 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
AngularJS的ng-click传参的方法
Jun 19 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
js实现省级联动(数据结构优化)
Jul 17 Javascript
vue父子组件的数据传递示例
Mar 07 #Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
Mar 07 #Javascript
完美实现js焦点轮播效果(一)
Mar 07 #Javascript
Vue2.0组件间数据传递示例
Mar 07 #Javascript
js实现网页定位导航功能
Mar 07 #Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 #Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 #Javascript
You might like
php随机显示图片的简单示例
2014/02/15 PHP
php实现上传图片生成缩略图示例
2014/04/13 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
常用jQuery选择器总结
2014/07/11 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
JSONP基础知识详解
2017/03/19 Javascript
NodeJs的fs读写删除移动监听
2017/04/28 NodeJs
使用vux实现上拉刷新功能遇到的坑
2018/02/08 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
js回到页面指定位置的三种方式
2020/12/17 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
[01:45]IMBATV TI4前线报道-选手到达
2014/07/07 DOTA
Python线程创建和终止实例代码
2018/01/20 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
pycharm: 恢复(reset) 误删文件的方法
2018/10/22 Python
Django websocket原理及功能实现代码
2020/11/14 Python
Python hashlib和hmac模块使用方法解析
2020/12/08 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
物业经理求职自我评价
2013/09/22 职场文书
爱之链教学反思
2014/04/30 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
上班迟到检讨书
2014/09/15 职场文书
开学典礼观后感
2015/06/15 职场文书
新闻稿格式范文
2015/07/18 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
关于python爬虫应用urllib库作用分析
2021/09/04 Python