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 22 Javascript
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 Javascript
jQuery实现的在线答题功能
Apr 12 Javascript
Node.js实现文件上传
Jul 05 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
vue弹窗消息组件的使用方法
Sep 24 Javascript
Vue动态生成表格的行和列
Jul 18 Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 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 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
php _autoload自动加载类与机制分析
2012/02/10 PHP
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
js文件缓存之版本管理详解
2013/07/05 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
JQuery的Pager分页器实现代码
2016/05/03 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
python使用百度翻译进行中翻英示例
2014/04/14 Python
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
python顺序执行多个py文件的方法
2019/06/29 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
拾金不昧的表扬信
2014/01/16 职场文书
五年级语文教学反思
2014/01/30 职场文书
战友聚会主持词
2014/04/02 职场文书
合作协议书怎么写
2014/04/18 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
全面盘点MySQL中的那些重要日志文件
2021/11/27 MySQL