非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 ...
随机推荐
- 【Spring 核心】装配Bean(一) 自动化装配
Spring从两个角度实现自动化装配:组件扫描 (Spring自动发现应用上下文中所创建的bean)自动装配(autowiring)自动满足bean之间的依赖 组件扫描: package test.s ...
- go web 第一天 学习笔记
package main import ( "fmt" "log" "net/http" "strings" ) fun ...
- 【渗透课程】前言-揭开Web渗透与安全的面纱(必看)
服务器是怎么被入侵的 攻击者想要对一台计算机渗透必须具备以下条件: 1.服务器与客户端能够正常通讯 (服务器是为客户端提供服务的) 2.服务器向客户端提供的权限(服务)或者说是端口. 服务端所提供的服 ...
- 使用Groovy处理SoapUI中Json response
最近工作中,处理最多的就是xml和json类型response,在SoapUI中request里面直接添加assertion处理json response的话,可以采用以下方式: import gro ...
- [2014-09-18]Entity Framework 6 预热、启动优化
好久没写博客了,终于憋出了一个大招,现在总结下. 虽然文章题目是针对EF的,但涉及的内容不仅仅是EF. 场景介绍 目前在做的一个项目,行业门户,项目部分站点按域名划分如下: user.xxx.com: ...
- 为table元素添加操作日志
1.为所有的元素添加函数onchange() <input id="status" value="${status}" onchange="ch ...
- 两台主机之间单向Ping不通的问题
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 } p.p2 ...
- js(javascript) 继承的5种实现方式
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt240 js继承有5种实现方式:1.继承第一种方式:对象冒充 functio ...
- c#反射执行静态方法
发射调用System.Environment.Exit(0)示例: System.Reflection.Assembly ass = System.Reflection.Assembly.LoadFi ...
- 从web图片裁剪出发:了解H5中的Blob
刚开始做前端的时候,有个功能卡住我了,就是裁剪并上传头像.当时两个方案摆在我面前,一个是flash,我不会.另一个是通过iframe上传图片,然后再上传坐标由后端裁剪,而我最终的选择是后者.有人会疑惑 ...