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 相关文章推荐
Jquery选择器 $实现原理
Dec 02 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
js实现随机点名小功能
Aug 17 Javascript
React/Redux应用使用Async/Await的方法
Nov 16 Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
antd配置config-overrides.js文件的操作
Oct 31 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
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
2015/09/02 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
JavaScript 数组中最大最小值
2016/06/05 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
微信小程序自定义tabBar在uni-app的适配详解
2019/09/30 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
浅谈JavaScript 声明提升
2020/09/14 Javascript
Python正则表达式常用函数总结
2017/06/24 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
python的re正则表达式实例代码
2018/01/24 Python
python将txt文件读取为字典的示例
2018/12/22 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
python exit出错原因整理
2020/08/31 Python
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
银河香水:Galaxy Perfume
2019/03/25 全球购物
Coccinelle官网:意大利的著名皮具品牌
2019/05/15 全球购物
Pop In A Box英国:Funko POP搪胶公仔
2019/05/27 全球购物
应用心理学个人的求职信
2013/12/08 职场文书
酒店总经理欢迎词
2014/01/15 职场文书
活动志愿者自荐信
2014/01/27 职场文书
数控技术应用个人求职信范文
2014/02/03 职场文书
前处理班长职位说明书
2014/03/01 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang