非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 ...
随机推荐
- JVM 调优总结
避免FullGC: 1.通过调整堆中新生代和幸存代大小,避免因为幸存代不足而让Minor GC后的对象进入老年代.每次Minor GC都有对象进入老年代会造成数次MinorGC后FullGC. 2.减 ...
- Linux学习笔记-林耐斯Notes-Linux就该这么学
Linux学习笔记... 参考的优秀Linux网站: http://www.w3cschool.cn/linux/ http://www.linuxeye.com/ http://linux.vbir ...
- CSS三种样式表
1.外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用 <link> 标签链接到样式表. & ...
- EXE转JPG后缀格式工具(真实JPG后缀)
EXE转JPG后缀格式工具(真实JPG后缀) exe转换为jpg工具,双击之后正常运行. 杀毒软件误报 本程序禁止用于违法操作. 下载地址 链接: https://pan.baidu.com/s/1b ...
- 第二章 [分布式CMS]
结构系统:定义的后台 资源云:存在静态资源文件 文档云:文章内容 工具服务:模板.,公共类 Web服务:处理一下数据交互 为什么要做分布式了? 说实话,我也不太清楚,网上说在性能方面比较好,我的理解是 ...
- JDBC获取数据库Connection的工具抽取
使用JDBC获取数据库的连接,大字分为三个步骤 1.获取驱动包名,定义URL,database_username,database_password 2.获取Connection对象 3.利用Conn ...
- JSP的getRequestDispatcher()与sendRedirect()的区别
getRequestDispatcher()与sendRedirect()的区别 1.request.getRequestDispatcher()是请求转发,前后页面共享一个request ; r ...
- 处理 Vue 单页面应用 SEO 的另一种思路
vue-meta-info 官方地址: monkeyWangs/vue-meta-info (设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plu ...
- Grails笔记四:Groovy特性小结
在学习Grails的时候与Groovy打交道不可避免,虽然不必太深刻,但多知道一些特性也是很有帮助的~ 1.相除后获取整数 使用intdiv()方法可以获得整数,注意点是这个方法只适用两个整数相除,浮 ...
- Docker 集群环境实现方式
Docker 集群环境实现的新方式 近几年来,Docker 作为一个开源的应用容器引擎,深受广大开发者的欢迎.随着 Docker 生态圈的不断建设,应用领域越来越广.云计算,大数据,移动技术的快速发展 ...