//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. dva 知识点

    dva中,路由模式从hashHistory换成 browserHistory: dva-cli创建的项目中,src/index.js相应部分修改如下: import browserHistory fr ...

  2. RSA 加密算法 Java 公钥加密私钥解密 和 私钥加密公钥解密 的特点

    package com.smt.cipher.unsymmetry; import org.apache.commons.codec.binary.Base64; import org.apache. ...

  3. thinkphp5 查询的数据是对象时,获取原始数据方法

    获取原始数据 如果你定义了获取器的情况下,希望获取数据表中的原始数据,可以使用: $user = User::get(1); // 通过获取器获取字段 echo $user->status; / ...

  4. 2、visualBox虚拟机扩容

    1.找到VBoxManager工具 1)打开Finder,找到[应用程序],在右侧找到VirtualBox.app,然后打开右键,找到[显示包内容],点击打开 2.打开终端,来到这个目录下 cd /A ...

  5. Fixed-point multiplication (C166 A*B/B)

    I want to multiply two fixed point numbers. After the multiplication I have to shift the result so t ...

  6. java降低竞争锁的一些方法

    序本文介绍一下提升并发可伸缩性的一些方式:减少锁的持有时间,降低锁的粒度,锁分段.避免热点域以及采用非独占的锁或非阻塞锁来代替独占锁. 减少锁的持有时间降低发生竞争可能性的一种有效方式就是尽可能缩短锁 ...

  7. 安装tensorflow,那叫一个坑啊

    最近,项目团队需要研究并应用AI的技术,在具体的产品实施环节中使用.之前的几个项目,是委托武汉大学给做的,基于keras框架,实现了一些图像识别的项目. 这不,上方希望自己能够掌握一些常用且成熟的AI ...

  8. Centos 7 systemctl和防火墙firewalld命令

    今天自己在Hyper-v下搭建三台Linux服务器集群,用于学习ELKstack(即大数据日志解决技术栈Elasticsearch,Logstash,Kibana的简称),下载的Linux版本为cen ...

  9. 【java】浅谈for循环

    for语法: for(初始化条件; 判断条件(bool型,不可缺省); 条件改变)// 初始化条件,条件改变可以是多条,eg for(x=1,y=1;x<4;x++,y++) { 执行的操作 } ...

  10. The Best KPIs to Use in Your Company

    Here is a list of key performance indicators (KPIs) that should be used in contact centres, alongsid ...