CSS中的高度
https://developer.mozilla.org/en-US/docs/Web/API/element.clientHeight
Element.clientHeight是只读属性,以像素为单位,返回的是元素内部的高度,包括padding但是不包含水平滚动条的高度,元素边框(border),及margin
clientHeight 可以计算为:CSS height+ CSS padding – 水平滚动条的高度(如果存在水平滚动条)
注意:这个属性会四舍五入为整数,如果你需要含有小数的值,使用element.getBoundingClientRect()
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight
HTMLElement.offsetHeight 只读属性, 以像素为单位,整数, 表示元素的高度包含垂直padding和border。
通常情况下, 一个元素的offsetHeight的计算 包含这个元素的borders,元素垂直方向上的padding,这个元素的水平滚动条(如果有并且显示了)和这个元素的CSS高度。
对于document的body对象,将所有的线性内容的总高度替换掉元素的CSS height来计算。对于floated元素extending below other linear content的会被忽略。
注意:这个属性会四舍五入为整数,如果你需要含有小数的值,使用element.getBoundingClientRect()
上面的图片显示了一个滚动条和offsetHeight。然而,非滚动的元素可能有比可以看到的内容更大的offsetHeight的值。这类的元素一般会包含滚动的元素,因此,非滚动的元素可能是完全或者部分可视,主要依赖于滚动的包含元素的scrollTop的设置。
https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollHeight
Element.scrollHeight
是一个只读属性,表示一个元素的高度包含以为溢出
overflow
在屏幕上不可见的内容。
ScrollHeight
的值等于元素显示所有内容不使用垂直滚动条的
clientHeight
。它包含元素的
padding
但是不包含
margin
。
注意:这个属性会四舍五入为整数,如果你需要含有小数的值,使用element.getBoundingClientRect()
应用实例:检测一个元素是否被滚动到底。
element.scrollHeight - element.scrollTop === element.clientHeight
检测元素的尺度
你发现有多个属性可以用来检测元素的宽和高了,但是使用哪一个才是你想要的有点棘手。下面将会帮助你进行选择。
CSS中的高度的更多相关文章
- CSS 中的高度百分比
CSS 中可以使用%来给定指定元素的大小,也就是高度.宽度.margin,padding 等等,但是相信很多人都对百分比表示法的具体含义并不清楚,那么不懂就练,毕竟是检验真理的唯一标准(考研党举个手我 ...
- css中div高度自适应
高度的自适应(父div高度随子div的高度改变而改变) 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改 ...
- CSS - Select 标签在不同浏览器中的高度设置
当使用Select标签时,在不同浏览器中显示的高度不同,如何解决此问题: 解决方法链接:http://stackoverflow.com/questions/20477823/select-html- ...
- css中的行高line-height
“行高”顾名思意指一行文字的高度.具体来说是指两行文字间基线之间的距离.基线实在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有四条线,其中底部第二条线就是基线,是a,c,z,x等字 ...
- 真正的能理解CSS中的line-height,height与line-height
https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...
- css实现div中图片高度自适应并与父级div宽度一致
需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...
- css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位
css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...
- css中如何实现左边的高度随着右边改变而改变
css中如何实现左边的高度随着右边改变而改变 html结构: <div class="main"> <div class="main_left" ...
- DIV+CSS布局中自适应高度的解决方法
div乱跑问题 (文件<DIV+CSS布局中自适应高度的解决方法.rar>) float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...
随机推荐
- cflow察看工程函数调用关系+Linux 0.11 内核实验环境
http://savannah.gnu.org/projects/cflow http://tinylab.org/linux-0.11-lab/ http://ftp.gnu.org/gnu/cfl ...
- Java语言基础(三)
Java语言基础(三) 一. 补码 (1).之所以有补码是因为要考虑成本 就是造计算机的成本 (2).下面让我们分析一下补码 以四位补码为例 <1> 高位是符号位,它决定其是正数还是 ...
- 深入分析 Java I/O 的工作机制--转载
Java 的 I/O 类库的基本架构 I/O 问题是任何编程语言都无法回避的问题,可以说 I/O 问题是整个人机交互的核心问题,因为 I/O 是机器获取和交换信息的主要渠道.在当今这个数据大爆炸时代, ...
- JS的事件监听机制
很久以前有个叫Netscape的姑娘,她制订了Javascript的一套事件驱动机制(即事件捕获) 后来又有一个叫“IE”的小子,这孩子比较傲气,他认为“凭什么我要依照你的规则走”,于是他又创造了一套 ...
- asp.net 的脚本
asp.net的 Web 控件有时会包装一些用户端脚本 (client-side scripting),在控件被绘制时输出到用户端,这些脚本多数被包装在 DLL 的资源档中,并由 ScriptReso ...
- jquery生产和开发的区别
今天说一下jquery生产和开发的区别,在我们下载jquery的时候,会有两个下载链接,一个是jquery.min.js .迷你版 (生产),另一个是 jquery.js .开发版 .不知道的人可能就 ...
- HTML5 文件域+FileReader 分段读取文件并上传(七)-WebSocket
一.单文件上传实例 HTML: <div class="container"> <div class="panel panel-default" ...
- c#迭代算法
//用迭代算法算出第m个值 //1,1,2,3,5,8...; //{1,0+1,1+1,1+2,2+3 ,3+5} static void Main(string[] arg ...
- php文件粘贴上传
<?php header("Access-Control-Allow-Origin:*"); $url = 'http://'.$_SERVER['HTTP_HOST']; ...
- 移动触摸事件(touchstart、touchmove和touchend)
touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发. touchmove事件:当手指在屏幕上滑动的时候连续地触发.在这个事件发生期间,调用preventDefaul ...