Element.clientHeight

  • Revision slug: DOM/element.clientHeight
  • Revision title: element.clientHeight
  • Revision id: 120948
  • Created:
  • Creator: George3
  • Is current revision? No
  • Comment /* References */ Fixed links

Revision Content

{{ DomRef() }}

Summary

Returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.

clientHeight can be calculated as CSS height + CSS padding - height of horizontal scrollbar (if present).

Syntax and values

var h = element.clientHeight;

h is an integer representing the clientHeight of element in pixels.

clientHeight is read–only.

Example

padding-top

Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.

Image:BirmanCat.jpgAll Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.

Cat image and text coming from http://www.best-cat-art.com/

padding-bottom

LeftTopRightBottommargin-topmargin-bottomborder-topborder-bottom

Image:clientHeight.png

Specification

Not part of any W3C specification.

Notes

clientHeight is a non-standard, HTML-specific property introduced in the Internet Explorer object model.

offsetLeft returns the position the upper left edge of the element; not necessarily the 'real' left edge of the element. This is important for span elements in flowed text that wraps from one line to the next. The span may start in the middle of the page and wrap around to the beginning of the next line. The offsetLeft will refer to the left edge of the start of the span, not the left edge of text at the start of the second line. Therefore, a box with the left, top, width and height of offsetLeft, offsetTop, offsetWidth and offsetHeight will not be a bounding box for a span with wrapped text. (And, I can't figure out how to find the leftmost edge of such a span, sigh.)

References

  • {{ MSDN("ms533563", "clientHeight Property") }}
  • {{ MSDN("ms530302", "Measuring Element Dimension and Location") }}

See Also

{{ languages( { "fr": "fr/DOM/element.clientHeight", "ja": "ja/DOM/element.clientHeight", "pl": "pl/DOM/element.clientHeight", "zh-cn": "cn/DOM/element.clientHeight" } ) }}

Revision Source

<p>
{{ DomRef() }}
</p>
<h3 name="Summary"> Summary </h3>
<p>Returns the inner height of an element in pixels, including padding but not the horizontal scrollbar height, border, or margin.
</p><p><code>clientHeight</code> can be calculated as CSS <code>height</code> + CSS <code>padding</code> - height of horizontal scrollbar (if present).
</p>
<h3 name="Syntax_and_values"> Syntax and values </h3>
<pre class="eval">var <var>h</var> = <var>element</var>.clientHeight;
</pre>
<p><var>h</var> is an integer representing the <code>clientHeight</code> of <var>element</var> in pixels.
</p><p><code>clientHeight</code> is read–only.
</p>
<h3 name="Example"> Example </h3>
<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"><div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"><p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p>
<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p>
<p><span style="float: right;"><img alt="Image:BirmanCat.jpg" fileid="44" src="File:en/Media_Gallery/BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p>
<p>Cat image and text coming from <a class=" external" href="http://www.best-cat-art.com/" rel="freelink">http://www.best-cat-art.com/</a> </p>
<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p></div><span style="position: absolute; left: -32px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Left</span><span style="position: absolute; left: 170px; top: -20px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Top</span><span style="position: absolute; left: 370px; top: 85px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Right</span><span style="position: absolute; left: 164px; top: 203px; color: blue; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">Bottom</span><span style="position: absolute; left: 143px; top: 5px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-top</span><span style="position: absolute; left: 138px; top: 175px; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">margin-bottom</span><span style="position: absolute; left: 143px; top: 27px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-top</span><span style="position: absolute; left: 138px; top: 153px; color: white; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif;">border-bottom</span></div>
<p style="margin-top: 270px;"><img alt="Image:clientHeight.png" fileid="608" src="File:en/Media_Gallery/ClientHeight.png"></p>
<h3 name="Specification">Specification</h3>
<p>Not part of any W3C specification.
</p>
<h3 name="Notes">Notes</h3>
<p><code>clientHeight</code> is a non-standard, HTML-specific property introduced in the Internet Explorer object model.
</p><p><code>offsetLeft</code> returns the position the upper left edge of the element; not necessarily the 'real' left edge of the element. This is important for <b>span</b> elements in flowed text that wraps from one line to the next. The span may start in the middle of the page and wrap around to the beginning of the next line. The <code>offsetLeft</code> will refer to the left edge of the start of the span, not the left edge of text at the start of the second line. Therefore, a box with the left, top, width and height of <code>offsetLeft, offsetTop, offsetWidth</code> and <code>offsetHeight</code> will not be a bounding box for a span with wrapped text. (And, I can't figure out how to find the leftmost edge of such a span, sigh.)
</p>
<h3 name="References">References</h3>
<ul><li> {{ MSDN("ms533563", "clientHeight Property") }}
</li><li> {{ MSDN("ms530302", "Measuring Element Dimension and Location") }}
</li></ul>
<h3 name="See_Also">See Also</h3>
<ul><li> <a href="en/DOM/element.offsetHeight">DOM:element.offsetHeight</a>
</li><li> <a href="en/DOM/element.scrollHeight">DOM:element.scrollHeight</a>
</li><li> <a href="en/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a>
</li></ul>
{{ languages( { "fr": "fr/DOM/element.clientHeight", "ja": "ja/DOM/element.clientHeight", "pl": "pl/DOM/element.clientHeight", "zh-cn": "cn/DOM/element.clientHeight" } ) }}
Revert to this revision