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数组的扩展实现代码集合
Jun 01 Javascript
JQuery CSS样式控制 学习笔记
Jul 23 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
Jun 13 Javascript
html5 canvas js(数字时钟)实例代码
Dec 23 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
Vue.js实现的购物车功能详解
Jan 27 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
用React Native制作一个简单的游戏引擎
May 27 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
使用GDB调试PHP代码,解决PHP代码死循环问题
2015/03/02 PHP
php模板引擎技术简单实现
2016/03/15 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
php面向对象值单例模式
2016/05/03 PHP
php intval函数用法总结
2019/04/14 PHP
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
jquery实现通用的内容渐显Tab选项卡效果
2015/09/07 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
Vue常用指令V-model用法
2017/03/08 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
Python动态加载模块的3种方法
2014/11/22 Python
粗略分析Python中的内存泄漏
2015/04/23 Python
python简单获取本机计算机名和IP地址的方法
2015/06/03 Python
Python面向对象class类属性及子类用法分析
2018/02/02 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
对tensorflow 的模型保存和调用实例讲解
2018/07/28 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
营销与策划专业毕业生求职信
2013/11/01 职场文书
代收款委托书范本
2014/10/01 职场文书
研讨会通知
2015/04/27 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
jQuery实现影院选座订座效果
2021/04/13 jQuery
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python