Revision 508825 of Element.clientHeight

<p>{{ DomRef() }}</p>
<h3 id="Summary" 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 id="Syntax_and_values" name="Syntax_and_values">Syntax</h3>
<pre class="syntaxbox">
var <var>h</var> = <var>element</var>.clientHeight;</pre>
<p><code><var>h</var></code> is an integer representing height of the <code>element</code> in pixels.</p>
<div class="note">
 <p><strong>Note:</strong> This property will round the value to an integer. If you need a fractional value, use {{ domxref("element.getBoundingClientRect()") }}.</p>
</div>
<p><code>clientHeight</code> is read–only.</p>
<h3 id="Example" 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="https://www.best-cat-art.com/" rel="freelink">https://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 id="Specification" name="Specification">Specification</h3>
<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSSOM View', '#dom-htmlelement-clientheight', 'clientheight')}}</td>
   <td>{{Spec2('CSSOM View')}}</td>
   <td>&nbsp;</td>
  </tr>
 </tbody>
</table>
<h3 id="Notes" 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 <strong>span</strong> 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, <a href="/en/DOM/element.offsetWidth" title="en/DOM/element.offsetWidth">offsetWidth</a></code> and <a href="/en/DOM/element.offsetHeight" title="en/DOM/element.offsetHeight"><code>offsetHeight</code></a> 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 id="References" name="References">References</h3>
<ul>
 <li>{{ MSDN("ms533563", "clientHeight Property") }}</li>
 <li>{{ MSDN("ms530302", "Measuring Element Dimension and Location") }}</li>
</ul>
<h3 id="See_Also" 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>
<p>{{ languages( { "fr": "fr/DOM/element.clientHeight", "ja": "ja/DOM/element.clientHeight", "pl": "pl/DOM/element.clientHeight", "zh-cn": "cn/DOM/element.clientHeight" } ) }}</p>