//9宫格布局
var prints=window.innerHeight-($('.header').height()+40);//屏幕去掉(头部高度+头部padding)
$('.weui-grid').height(prints/4-40);//屏幕保留四排,让每个占剩下的4分之一(去掉上下padding)
//内容居中,(一个格子的高度-内容高度)/2分给上下padding
$('.weui-grid').css({'paddingTop':((prints/4)-50)/2,'paddingBottom':((prints/4)-50)/2}); 
 

window.innerHeight适用在移动端
pc端:
网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth

js控制高度自适应,做到响应式的更多相关文章

  1. html5 getComputedStyle + resize 实现动态宽高度等比响应式页面设计

    序:通常我们只能控制div的宽度 而不能控制高度,在响应式页面里 如果要这个div是正方形那么必须的用媒体查询在不同的分辨率下写死宽高度 今天突发奇想研究了个 用百分比来动态控制div的高度让其与宽度 ...

  2. Restive.js – 轻松让网站变成响应式和自适应

    Restive.js 是一个 jQuery 插件,可以帮助您轻松快捷地添加响应式功能到你网站,适应几乎所有拥有 Web 功能的设备.使用设备检测,高级管理断点,以及方向管理的组合,Restive.js ...

  3. [css或js控制图片自适应]

    [css或js控制图片自适应]图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?此个人博客想到了一个 ...

  4. HTML5 respond.js 解决IE6~8的响应式布局问题

    HTML5 respond.js 解决IE6~8的响应式布局问题   响 应式布局,理想状态是,对PC/移动各种终端进行响应.媒体查询的支持程度是IE9+以及其他现代的浏览器,但是IE8在市场当中仍然 ...

  5. 项目新的需求,网页的自适应交付/响应式交付 Responsive/Adaptive Delivery

    网页为什么要做自适应交付,皆因现在移动设备大行其道,现在是移动互联网时代,以IOS及Android为首的各种移动终端已经遍地开花. 当人家用380px的iphone打开你的网页时,你总不能显示个102 ...

  6. CSS3+Js制作的一款响应式导航条

    今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大 ...

  7. 用JS更好的实现响应式布局

    响应式布局更加高效的方法: 代码实现 <script> $(function() { (function(){ var $html = $('html'); var $window = $ ...

  8. 去掉iframe默认滚动条后影响正常滚动以及js解决高度自适应。

    对于iframe,相信大家都是知道存在很多弊端,比如说不利于搜索引擎的抓取:产生冗余结构体系不易管理等.不过在漫长的开发路上有时候使用是不可避免的. 前两天在做一个退弹的功能的时候使用了iframe, ...

  9. css3 @media支持ie8用respond.js 解决IE6~8的响应式布局问题

    respond.js插件实现原理 接下来,需要理解respond.js的实现思路: 第一步,将head中所有外部引入的CSS文件路径取出来存储到一个数组当中: 第二步,遍历数组,并一个个发送AJAX请 ...

随机推荐

  1. Day 03 基本数据类型

    一.基本数据类型的使用 1.为何区分数据类型? 答:数据类型指的是变量值的类型,变量值之所以区分类型,是因为变量值用来记录事物状态的,而事物的状态有不同的种类,对应着也必须使用不同类型的值去记录. 整 ...

  2. 自动化测试神器 之 python unittest 断言

    自动化测试的最后一步需要判断结果是否正确,而正确设置断言可以帮助判断测试用例的执行结果,从而提高自动化测试的效率,python unittest  提供了一个比较完整的断言方法.unittest框架测 ...

  3. WORD 的 Open 和Workbook 的 LoadFromFile 函数返回null的一种解决方法

    WORD Application.Documents.Open 和 Workbook workbookExcel.LoadFromFile 函数返回null的一种解决方法 DCOM Config Se ...

  4. java集合与包装类

    一.集合概述 1 为什么需要使用集合? 引入案例:存储每天产生的新闻. 是要解决数组的局限性(定长),由于数组定长,可能会导致内存浪费或者内存不够. 需要一种技术:能够根据数据量而动态伸缩内存空间一种 ...

  5. 浏览器实现PDF预览

    1.使用jquery.media.js预览PDF <!DOCTYPE html> <html> <head> <meta charset="utf- ...

  6. tomcat端口号被占用的问题

    错误原因:8080端口被其他的应用占用! 在网上查了下解决方案,有些说在任务管理窗口关闭javaw.exe,有些说shutdown一下tomcat,亲测在某些场合下可用. 下面是摘自其它博客园里文章的 ...

  7. 使用php生成数字、字母组合验证码

    项目中经常会遇到一些登陆验证,支付验证等等一系列安全验证的策略.实现方法多种多样,下面就来讲解下如何用php生成简单的文字+数字组合的验证码: 所用语言php,gd库 原理解释: a>实质上是在 ...

  8. 黄聪:bootstrap的模态框modal插件在苹果iOS Safari下光标偏离问题解决方案

    一行CSS代码搞定: body.modal-open { position: fixed; width: 100%; }

  9. Java第08次实验提纲(多线程)

    PTA与参考资料 题集:多线程 多线程实验参考文件 ThreadReading 实验-基础部分 基础题目MyThread类.PrintTask(讲解线程Thread与任务Runnable相分离的概念) ...

  10. PowerPoint’s Menu is Too Big

    转自: http://jdav.is/2016/08/31/powerpoints-menu-is-too-big/ It seems that when Microsoft deployed the ...