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区别的更多相关文章

  1. document.body、document.documentElement和window获取视窗大小的区别

    来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于In ...

  2. document.body、document.documentElement和window获取视窗大小的差别

    来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗体大小的三种方法(浏览器的视口,不包含工具栏和滚动栏). 对于In ...

  3. 不同浏览器对document.documentElement和document.body的scrollheight ,scrollTop,clientHeight以及判断滚动条是否滚动到页面最底部 【转载】

    前段时间学习怎么写一个瀑布流的时候,就接触到document.documentElement和document.body的区别,然后今天查资料的时候看到这篇博客,遂转载记录在此. 两种特殊的文档属性可 ...

  4. IE/FF/Chrome下document.documentElement和document.body的 scrollHeight/scrollTop/clientHeight 以及判断滚动条是否已拉到页面最底部

    DTD已声明 IE document.documentElement.scrollHeight 浏览器所有内容高度 ,document.body.scrollHeight 浏览器所有内容高度 docu ...

  5. document.body.clientHeight与document.documentElement.clientHeight

    当你的网页有: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  6. document.documentElement和document.body 与document.compatMode的关系

    首先我们看看document.compatMode(兼容模式): document.compatMode它有两种可能的返回值:BackCompat和CSS1Compat, document.compa ...

  7. 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

    一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.on ...

  8. document.documentElement.clientWidth

    document.documentElement.clientWidth 摘自:http://blog.sina.com.cn/s/blog_6f1f9ead0100n1f6.html 关于获取各种浏 ...

  9. js中document.documentElement 和document.body 以及其属性 clientWidth等

    在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document .body.scrollTop等属性,但是此属性在xhtml标准 ...

随机推荐

  1. SqlServer用sql语句清理log日志

    原文:SqlServer用sql语句清理log日志 USE[master] ALTER DATABASE [Center] SET RECOVERY SIMPLE WITH NO_WAIT ALTER ...

  2. bin文件夹下的某个dll总是自动刷新为不同版本的dll的解决方法

    如上图所示,一般这种问题都是dll版本和配置文件中的dll版本对应不上才引起的,可以通过替换对应版本的dll或者修改配置文件中的版本号即可. 然而我的情况是:修复后,还是不定时出现这样的问题,我以为是 ...

  3. 客户端相关知识学习（十一）之Android H5交互Webview实现localStorage数据存储

    前言 最近有一个需求是和在app中前端本地存储相关的,所以恶补了一下相关知识 webView开启支持H5 LocalStorage存储 有些时候我们发现写的本地存储没有起作用,那是因为默认WebVie ...

  4. 使用Mmap系统调用进行硬件地址访问

    Mmap系统调用: Mmap函数是内存映射函数,负责把文件内容映射到进程的虚拟内存空间,通过对这段内存的读取和修改,来实现堆文件的读取和修改,而不需要再调用read,write等操作. 原型如下: 其 ...

  5. zabbix-通过自动注册自动添加主机

    自动注册和自动发现可以实现一样的效果,就是自动添加符合条件的主机到监控,那跟自动发现有什么区别? 其实自动发现是由弊端的,上文也说到了,zabbix server是主动去扫描网段,寻找agent的,试 ...

  6. Java 中的多态，一次讲个够之继承关系中的多态

    多态是继封装.继承之后,面向对象的第三大特性. 现实事物经常会体现出多种形态,如学生,学生是人的一种,则一个具体的同学张三既是学生也是人,即出现两种形态. Java作为面向对象的语言,同样可以描述一个 ...

  7. mongodb索引简介

    上面讲解了数据的查询和索引的简单使用,并且说明索引可以显著的加快查询速度,实际上查询的种类有很多,与之对应的索引的种类也有很多,接下来会与索引一起,在说明索引种类的同时,详细介绍下查询的参数 1.索引 ...

  8. mongodb文件

    https://github.com/mongodb/mongo/tree/master  或 https://www.mongodb.com/download-center?jmp=nav#comm ...

  9. 15、TDM模型

    论文:https://arxiv.org/pdf/1801.02294.pdf 解析: 学习基于树的推荐系统深度模型 Learning Tree-based DeepModel for Recomme ...

  10. 如果将 macOS Mojave 降级为 macOS Sierra 或者更低版本

    当前系统是10.14,我想装回10.11 办法: 1. 下载10.11, 我是从themacgo网站下载的 https://themacgo.com/macos-sierra-10-12-1-dmg- ...