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浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
使用C++为node.js写扩展模块
Apr 22 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
js模拟微博发布消息
Feb 23 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 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的伪静态模式
2015/12/31 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
基于逻辑运算的简单权限系统(实现) JS 版
2007/03/24 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
JavaScript实现自动切换图片代码
2016/10/11 Javascript
vue组件生命周期详解
2017/11/07 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
Python中文编码那些事
2014/06/25 Python
Python list操作用法总结
2015/11/10 Python
Python定时任务sched模块用法示例
2018/07/16 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
高中生毕业自我鉴定范文
2013/12/22 职场文书
简历里的自我评价
2014/01/31 职场文书
学生周末长期请假条
2014/02/15 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
建筑结构施工求职信
2014/07/11 职场文书
加班费申请报告
2015/05/15 职场文书
亮剑观后感
2015/06/05 职场文书
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python