非position:fixed,footer自動調到屏幕底部
一、980px手機端寫法:
$(function(){
var sh=$('section').height();
var ww=$(window).width();
var wh=$(window).height();
var dw=$(document.body).width();
var dh=$(document.body).height();
var width=ww-dw;
var height=wh-dh;
if (parseInt(height)>0){
$('section').height(sh+height+'px');
};
});
二、非980px手機端寫法:
$(function(){
var sh=$('section').height();
var ww=$(window).width();
var wh=$(window).height();
var dw=$(document.body).width();
var dh=$(document.body).height();
var th=dh/dw*ww;
var width=ww-dw;
var height=(wh-th)*(dw/ww);
if (parseInt(height)>0){
$('section').height(sh+height+'px');
};
});
非position:fixed,footer自動調到屏幕底部的更多相关文章
- 移动Web开发实践——解决position:fixed自适应BUG
在移动web中使用position:fixed,会踩到很多坑,在我之前的一篇文章<移动端web页面使用position:fixed问题总结>中已经总结了很多bug,但是在后续的开发中有关f ...
- 解决 scroll() position:fixed 抖动、导航菜单固定头部(底部)跟随屏幕滚动
一.导航栏或者页脚正常情况下固定在页面的相应位置,当页面滚动后,导航栏或者页脚固定在页面的顶部或者底部的情景 一般就是将该块的代码样式的position设置为fixed.固定在顶部的话,将top设置为 ...
- 解决IE不支持position:fixed问题
#box { /* 非IE6浏览器使用固定元素 */ position:fixed; top:0; left:0; /* IE6改为绝对定位,并通过css表达式根据滚动位置更改top的值 */ _po ...
- 移动端web页面使用position:fixed问题
在做移动端项目时,碰到一个很纠结的问题,头部固定的问题,一开始使用fixed,发现一系列的问题, 问题1:footer输入框 focus 状态,footer 被居中,而不是吸附在软键盘上部. 测试环境 ...
- ios解决输入框弹出后position:fixed失效问题
最近在使用AmazeUI进行仿App Mobile Web开发时遇到了讨论众多的position:fixed问题.position:fixed在安卓2.2以上已经实现,但是在ios8以下系统当小键盘激 ...
- 移动端web页面使用position:fixed问题总结
近期完成了一个新的项目(搜狐直播),其中又涉及到了 fixed(固定位置定位)的问题,在之前的文章<移动Web产品前端开发口诀——“快”>中已经阐述过我对 iScroll 的态度,所以在这 ...
- IE6下position:fixed不支持问题及其解决方式
IE6有诸多奇葩,不支持position:fixed就是当中之中的一个.所以在做一些比方固定在顶部或者底部或者固定元素的效果时须要考虑兼容IE6的这个问题.解决方式是用Ie6的hack. *html ...
- webapp前端开发软键盘与position:fixed为我们带来的不便
前提:我们考虑兼容的环境为android和ios两种智能手机 兼容环境测试结果显示android的表现明显好于ios,ios手机在软键盘呼起收起时存在着很严重的兼容性问题 场景展示: 页面正常状态 软 ...
- 不受控制的 position:fixed
本文为纯理论文章,没有 Demo,没有配图,可能会略微枯燥. 大家都知道,position:fixed 在日常的页面布局中非常常用,在许多布局中起到了关键的作用.它的作用是: position:fix ...
随机推荐
- Python 中的重点来了 : 迭代器 生成器
可迭代的对象:带有__iter__方法的,就是迭代器.字符串,列表,元祖,字典,集合,文件,都是可迭代的 可迭代的对象使用了__iter__方法的,就是迭代器,带有__next__,__iter__方 ...
- NTP原理及配置使用
一.NTP简介 1.NTP简介 NTP(Network Time Protocol,网络时间协议)是用来使网络中的各个计算机时间同步的一种协议.它的用途是把计算机的时钟同步到世界协调时UTC,其精 ...
- kong介绍-个人分享
kong简介 背景 我们在提供api或微服务时,通常借助openresty nginx进行流量转发或者添加一些规则或功能,但是随着服务数量和引用增多,复杂的网络环境, 使维护变得困难,不容易扩展,一些 ...
- 6.28 Windows Serviece
描述: A 软件,已经注册了一个windows服务并启用,现在需要在服务自己的一个类B里增加一个字段,服务的作用是返回一个该类型B的实例 做法 增加字段,替换服务文件,重新注册服务并开启,但是在A软件 ...
- mysql互换表中两列数据
在开发过程中,有时由于业务等需要把一个表中的两列数据进行交换. 解决方案 使用update命令,这完全得益于MySQL SQL命令功能的强大支持. 表格中原来数据类似如下: select * from ...
- 关联本地文件夹到github项目
git init git remote add origin https://自己的仓库url地址 git status git add . git commit -m '[提交内容的描述]' 先 p ...
- Redis在java中的使用
1.首先安装Redis环境.可以在Windows.linux.别的服务器上搭建Redis环境 2.在java工程中导入必须的jar包 如maven上导入两个jar] <!-- Redis必须包 ...
- 49、html基础认识&常用标签(1)
从今天期我们进入前端的学习,先学习html,没有任何需要逻辑需要烧脑,只需要记忆.练习.练习.练习. 一.HTML初识 1.web服务本质 import socket def main(): sock ...
- vue中数据双向绑定的实现原理
vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...
- 最近做了一个通达OA的大料:20170905最新版本破解可改单位名称,无限制安装
最近做了一个通达OA的大料:20170905最新版本破解可改单位名称,无限制安装 用户约七十家,总体不错,修改了两次注册授权文件,完美使用中 可联系麦枫http://www.mfsun.com管理员Q ...