BOM中的各种height
BOM中的高度属性主要涉及三块：screen、window、文档下的元素。
screen
其中screen最简单，代表着显示器的对象。
screen.height ：屏幕高度，像素为单位。
screen.availHeight :屏幕高度送去Windows系统的任务栏的高度。
从左到右，分别是Edge Chrome Firefox。因为是同一个屏幕，所以三者的结果都是相同的。
screen.width 和 screen.availWidth 类似。因为水平方向没有任务栏，所以 screen.width == screen.availWidth 。
window
这里的window代表浏览器窗口，关于高度有两个：
- innerHeight
- outerHeight
window.outerHeight : 获取整个浏览器窗口的高度（单位：像素），包括侧边栏（如果存在）、窗口镶边和窗口调整边框。
window.innerHeight : 浏览器窗口的视口（viewport）高度（以像素为单位），如果存在水平滚动条，则包括它。
关于window的宽度类似：
- window.outerWidth : 获取浏览器窗口外部的宽度。表示整个浏览器窗口的宽度，包括侧边栏（如果存在）、窗口镶边和调整窗口大小的边框。
- window.innerWidth : 浏览器视口（viewport）宽度（单位：像素），如果存在垂直滚动条则包括它。
文档下的元素
文档下的元素的高度信息主要通过clientHeight这一属性获得。
clientHeight:
返回元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。
在下图中，element.clientHeight就是红色框内的高度。
关于文档中元素的clientHeight，我们主要关注这两个元素的：
- document.documentElement
- document.body
什么是 document.documentElement 元素呢？它代表着一个文档的根元素，如HTML文档的 <html> 元素,XML文档的根元素等等。
三者的关系
window.innerHeight document.documentElement.clientHeight 和 document.body.clientHeight 之间有什么关系呢？
window.innerHeight = document.documentElement.clientHeight +水平方向滚动条高度
Edge：因为没有水平方向滚动条，所以两者值相同
Chrome:因为有水平方向的滚动条，所以 window.innerHeight 比 document.documentElement.clientHeight 多了17px
而 document.body.clientHeight 就是body标签内的元素所占的高度（除了border和margin）。
clientHeight offsetHeight scrollHeight之间的关系
用一张图来说明，红色框中的是当前元素。
clientHeight :只有元素的内容区和padding
offsetHeight :元素的内容区 padding border margin scrollbar
scrollHeight :元素内容的实际高度，包含了溢出的部分
scrollTop :元素距离他容器顶部的像素距离
BOM中的各种height的更多相关文章
- css中的width,height，属性与盒模型的关系
这段话很容易记住盒模型: css中盒子模型包含属性margin.border.padding.content,他们可以把它转移到我们日常生活中的盒子(箱 子)上来理解,日常生活中所见的盒子也具有这些属 ...
- K3精益版给物料添加属性，并在BOM中新增字段引用该属性
1.给物料新增属性 打开“系统--基础资料--公共资料--核算项目管理”,然后双击物料,弹出核算项目类别-修改对话框.再点新增按钮: 输入你想新增字段的类型,长度,想要放置的位置. 相关属性里面选的是 ...
- JavaScript BOM-11-BOM的核心-window对象; window对象的控制,弹出窗口方法; 超时调用; 间歇调用; location对象常用属性; 位置操作--location.reaplace,location.reload(); BOM中的history对象; Screen对象及其常用属性; Navigator对象;
JavaScript BOM 学习目标 1.掌握什么是BOM 2.掌握BOM的核心-window对象 3.掌握window对象的控制.弹出窗口方法 什么是bom BOM(browser object ...
- CSS中width和height与盒子模型的关系
盒子模型 css中盒子模型包含属性margin.border.padding.width与height,他们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也具有这些属性,所以 ...
- 【CSS中width、height的默认值】
对于初学者来说,CSS中的width.height的默认值是很神奇的,因为经常看到如下这样的代码:明明只给一个#father标签(红色的div)设置了一个width,为啥它在浏览器中显示出来是有一个固 ...
- js中不同的height, top的对比
每次看到js中的clientHeight(clientTop), offsetHeight(offsetTop),scrollHeight(scrollTop)就头大,根本分不清这几种的区别,然而碰到 ...
- CSS中详解height属性
目录结构: contents structure [+] hight属性值类型一览表 height的%的使用 定义 实例 需要注意的 参考文章 hight属性值类型一览表 value describt ...
- 解决在vue中设置的height: 100%没有效果
在新的页面设置height无效果的时候.需要改动App这个文件的heigth 解决办法.给app这个盒子设置高度.默认情况下为0 设置高度100%时,div的高度会等同于其父元素的高度.而上面中id为 ...
- jQuery中animate的height的自适应
可以用 animate() 方法几乎可以操作大部分CSS 属性,但其属性的值不能为字符串,很多人都遇到过这个问题. 例如:获取一个元素自适应时的高,但el.animate({height:‘aut ...
随机推荐
- mvc中DotNetOpenAuth实现了第三方应用访问自己的网站
以yahoo为例吧,即从yahoo取得用户信息,存到自己的站点,实现了用户信息在一次录入多处共享的功能.以下是在点击了使用yahoo登录本站的链接后执行action:OpenId. ProviderU ...
- STM32实战应用（一）——1602蓝牙时钟1液晶的显示测试
前言 从51到STM32F4学习这么久了,总算找到点头绪了,目前学习了GPIO,中断,定时器,看门狗的基本使用,所以想试着看看能不能做个什么东西,就是想复习一下最近学习的知识.正好上学期单片机课程设计 ...
- Angular2快速起步——构建一个简单的应用
构建此应用,分为如下几步: 1.环境准备:安装Node.js和npm: 2.创建并配置此项目: 3.创建应用: 4.创建组件并添加到应用程序中: 5.启动应用程序: 6.定义作为该应用的宿主页面: 7 ...
- [ext4]空间管理 - 分配机制
在Ext4系统中,存在很多分配策略,比如预分配.多块分配.延迟分配等 Prealloc预分配 在ext4系统中,对于小文件和大文件的空间申请请求,都有不同的分配策略.对用小文件的空间请求,e ...
- mysql行列转换方法总结
这是一道行转列并且构造交叉表的问题: http://topic.csdn.net/u/20090530/23/0b782674-4b0b-4cf5-bc1a-e8914aaee5ab.html 数据样 ...
- [UWP]了解模板化控件(8)：ItemsControl
1. 模仿ItemsControl 顾名思义,ItemsControl是展示一组数据的控件,它是UWP UI系统中最重要的控件之一,和展示单一数据的ContentControl构成了UWP UI的绝大 ...
- hdu1151有向图的最小顶点覆盖
有向图的最小路径覆盖=V-二分图最大匹配. Consider a town where all the streets are one-way and each street leads from o ...
- hadoop集群间的hdfs文件拷贝
1.背景 部门有个需求,在网络互通的情况下,把现有的hadoop集群(未做Kerberos认证,集群名为:bd-stg-hadoop)的一些hdfs文件拷贝到新的hadoop集群(做了Kerberos ...
- poj1797 Heavy Transportation Dijkstra算法的简单应用
题目链接:http://poj.org/problem?id=1797 题目就是求所有可达路径的其中的最小值边权的最大值 即对于每一条能够到达的路径,其必然有其最小的承载(其实也就是他们自身的最大的承 ...
- 你真的用好了Python的random模块吗？
random模块 用于生成伪随机数 源码位置: Lib/random.py(看看就好,千万别随便修改) 真正意义上的随机数(或者随机事件)在某次产生过程中是按照实验过程中表现的分布概率随机产生的,其结 ...