Height in CSS

Https://developer.mozilla.org/en-US/docs/Web/API/element.clientHeight

Element.clientheight is a read-only property, in pixels, that returns the height inside the element, including padding but not the height of the horizontal scrollbar, the element border (border), and the margin

ClientHeight can be computed as: CSS height+ CSS padding– horizontal scrollbar height (if horizontal scroll bar exists)

Note: This property is rounded to an integer, if you need a value that contains a decimal, use the Element.getboundingclientrect ()

Https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight

Htmlelement.offsetheight A read-only property, in pixels, of integers, that represents the height of the element that contains the vertical padding and border.

Typically, the offsetheight of an element contains the borders of the element, the padding of the element in the vertical direction, the horizontal scrollbar of the element (if it has one) and the CSS height of the element.

For the body object of document, the total height of all linear content is replaced by the CSS height of the element. For floated elements extending below other linear content is ignored.

Note: This property is rounded to an integer, if you need a value that contains a decimal, use the Element.getboundingclientrect ()

The picture above shows a scroll bar and offsetheight. However, non-scrollable elements may have values that are larger than what can be seen offsetheight. Elements of this type typically contain scrolling elements, so non-scrolling elements may be completely or partially visible, relying primarily on the scrolltop setting of the scrolling containing element.

Https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollHeight

Element.scrollHeight 是一个只读属性，表示一个元素的高度包含以为溢出overflow在屏幕上不可见的内容。ScrollHeight的值等于元素显示所有内容不使用垂直滚动条的clientHeight。它包含元素的padding但是不包含margin。

Note: This property is rounded to an integer, if you need a value that contains a decimal, use the Element.getboundingclientrect ()

 

应用实例：检测一个元素是否被滚动到底。

Element.scrollheight-element.scrolltop = = = Element.clientheight

 

 

Https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements

检测元素的尺度

你发现有多个属性可以用来检测元素的宽和高了，但是使用哪一个才是你想要的有点棘手。下面将会帮助你进行选择。

 

 

 

 

Height in CSS