window.innerHeight与document.documentElement.clientHeight与document.body.clientHeight区别
window.innerHeight属于BOM（浏览器对象模型）,获取的高度包含横向滚动条
document.documentElement.clientHeight属于文档对象模型,不包含横向滚动条
document.body.clientHeight属于文档对象模型,body高度，如果设置body height=100%，document.documentElement.clientHeight=document.body.clientHeight
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,body{
margin: ;
padding: ;
height: %;
width: %;
}
.box{
height: %;
width: %;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
console.log('innerHeight:'+ window.innerHeight)
console.log('documentElement.clientHeight:'+ document.documentElement.clientHeight)
console.log('body.clientHeight:'+ document.body.clientHeight)
</script> </body>
</html>
window.innerHeight与document.documentElement.clientHeight与document.body.clientHeight区别的更多相关文章
- document.body、document.documentElement和window获取视窗大小的区别
来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于In ...
- document.body、document.documentElement和window获取视窗大小的差别
来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗体大小的三种方法(浏览器的视口,不包含工具栏和滚动栏). 对于In ...
- 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】
前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...
- IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部
DTD已声明 IE document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度 docu ...
- document.body.clientHeight与document.documentElement.clientHeight
当你的网页有: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- document.documentElement和document.body 与document.compatMode的关系
首先我们看看document.compatMode(兼容模式): document.compatMode它有两种可能的返回值:BackCompat和CSS1Compat, document.compa ...
- 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.on ...
- document.documentElement.clientWidth
document.documentElement.clientWidth 摘自:http://blog.sina.com.cn/s/blog_6f1f9ead0100n1f6.html 关于获取各种浏 ...
- js中document.documentElement 和document.body 以及其属性 clientWidth等
在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document .body.scrollTop等属性,但是此属性在xhtml标准 ...
随机推荐
- [JZOJ5888]GCD生成树
[JZOJ5888]GCD生成树 题目链接 gugugu 分析 对于N很小的情况,暴力Prim即可 对于值域很小的情况,我的想法与solution不太一样,将值相同的缩成一个点,\(O(w^2)\)预 ...
- SQL查询月、天、周、年（MySql的实例对比）
SQL Server实现 日期部分 缩写 year yy, yyyy quarter qq, q month mm, m dayofyear dy, y day dd, d week wk, ww w ...
- 函数实现计算等差数列的第n项
等差数列的第n项 描述 等差数列是指从第二项起,每一项与它的前一项的差等于同一个常数的一种数列,这个常数叫做等差数列的公差. ...
- JVM内存结构划分
JVM内存结构划分 JVM内存结构划分 数据区域划分 程序计数器 虚拟机栈 本地方法栈 堆 方法区 运行时常量池 StringTable 直接内存 创建新对象说明 对象的创建 对象的内存布局 对象头 ...
- 巧用flex（一）
在开发中我们经常遇到一个页面头部内容固定顶部,中间内容可滚动的需求,一般的逻辑就是把头部内容通过position以及z-index固定位置,提高层级,然后中间内容设置距离顶部一定距离,这样的效果是侧边 ...
- BP神经网络—java实现
神经网络的结构 神经网络的网络结构由输入层,隐含层,输出层组成.隐含层的个数+输出层的个数=神经网络的层数,也就是说神经网络的层数不包括输入层.下面是一个三层的神经网络,包含了两层隐含层,一个输出层. ...
- 【Distributed】分布式系统中遇到的问题
一.概述  大型互联网公司公司一般都采用服务器集群,这样就要实现多个服务器之间的通讯,在nginx实现负载均衡(分布式解决方案)服务器集群会产生那些问题? 分布式锁(基本)单纯的Lock锁或者syn ...
- 关于js里的布尔值判断
第一种if(a)a为以下值时转换为false false undefined null 0 -0 NaN ""
- 【2017-11-26】Linq表连接查询
class Program { static void Main(string[] args) { //Linq创建的数据库上下文对象db DataClasses2DataContext db = n ...
- 算法笔记--可撤销并查集 && 可持久化并查集
可撤销并查集模板: struct UFS { stack<pair<int*, int>> stk; int fa[N], rnk[N]; inline void init(i ...