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标准 ...
随机推荐
- Rider开发开发.NET Framework 4.5项目遇到的一些问题
使用rdier自带resharper功能,蛮爽的但是编译旧的项目时一直报错:Invalid option 'portable' for /debug; must be full or pdbonly' ...
- vs Code编辑器智能提示功能
一.Node.Js的Typings工具可以用于Visual Studio Code的代码补全 1.vscode 的默认只有es原声api带有自动补全的功能,现在V1.9的版本默认已经支持NodeJS的 ...
- 线程池工具ThreadPoolExecutor
JDK1.5中引入了强大的concurrent包,其中最常用的莫过了线程池的实现ThreadPoolExecutor,它给我们带来了极大的方便,但同时,对于该线程池不恰当的设置也可能使其效率并不能达到 ...
- Go 接口使用
本文来自:CSDN博客 感谢作者:fengfengdiandia 查看原文:go 接口 Go 语言不是一种 “传统” 的面向对象编程语言:它里面没有类和继承的概念. 但是 Go 语言里有非常灵活的接口 ...
- 2.Buffer 缓冲区
/*缓冲区(Buffer)*/ Buffer 就像一个数组,可以保存多个相同类型的数据.根据数据类型不同(boolean 除外),有以下Buffer常用子类: /*ByteBuffer*/(常用) . ...
- Kafka的性能分析
都说Kafka的吞吐量很大,但是我一直不直到Kafka为何有如此大的吞吐量.最近在看Kafka权威指南,陆陆续续得到了如下结论: 1.分区:Kafka支持分区,这样就支持多个生产者和多个消费者同时请求 ...
- 【转】PS1应用-修改linux终端命令行字体颜色
原文链接:https://www.jianshu.com/p/4239d3ea72fe cd ls -la vim .bashrc 在.bashrc中加入这一行: PS1="\[\e[37; ...
- Windows10官方正版系统的安装、激活、升级、U盘制作，无毒无害无捆绑无风险教程
一般电脑系统出了其他问题或电脑用久太卡了,可以选择此类方法解决系统卡顿问题,重置电脑系统或也可以恢复出厂设置 如果出现重置找不到恢复环境问题 可以通过下载系统镜像来解决,进入 MSDN 网站下载所需系 ...
- flask例子
1.例子: https://blog.csdn.net/z564359805/article/details/83474387 def get_embedding(bc,query_list,ba ...
- 关于tcp send的再次思考
最近在用socket时,再次思考了一下如何确保对方收到消息的问题 下面是一些不错的回答 https://www.zhihu.com/question/25016042/answer/73785738 ...