Thought of explaining what is the difference between `offsetHeight`, `clientHeight` and `scrollHeight` or `offsetWidth`, `clientWidth` and `scrollWidth`?

One must know this difference before working on the client side. Otherwise half of their life will be spent in fixing the UI.

[Fiddle](http://jsfiddle.net/shibualexis/yVhgM/3/), or inline below:


&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-js --&gt;

    function whatis(propType) {
      var mainDiv = document.getElementById(&quot;MainDIV&quot;);
      if (window.sampleDiv == null) {
        var div = document.createElement(&quot;div&quot;);
        window.sampleDiv = div;
      }
      div = window.sampleDiv;
      var propTypeWidth = propType.toLowerCase() + &quot;Width&quot;;
      var propTypeHeight = propType + &quot;Height&quot;;

      var computedStyle = window.getComputedStyle(mainDiv, null);
      var borderLeftWidth = computedStyle.getPropertyValue(&quot;border-left-width&quot;);
      var borderTopWidth = computedStyle.getPropertyValue(&quot;border-top-width&quot;);

      div.style.position = &quot;absolute&quot;;
      div.style.left = mainDiv.offsetLeft + Math.round(parseFloat((propType == &quot;client&quot;) ? borderLeftWidth : 0)) + &quot;px&quot;;
      div.style.top = mainDiv.offsetTop + Math.round(parseFloat((propType == &quot;client&quot;) ? borderTopWidth : 0)) + &quot;px&quot;;
      div.style.height = mainDiv[propTypeHeight] + &quot;px&quot;;
      div.style.lineHeight = mainDiv[propTypeHeight] + &quot;px&quot;;
      div.style.width = mainDiv[propTypeWidth] + &quot;px&quot;;
      div.style.textAlign = &quot;center&quot;;
      div.innerHTML = propTypeWidth + &quot; X &quot; + propTypeHeight + &quot;( &quot; +
        mainDiv[propTypeWidth] + &quot; x &quot; + mainDiv[propTypeHeight] + &quot; )&quot;;



      div.style.background = &quot;rgba(0,0,255,0.5)&quot;;
      document.body.appendChild(div);

    }
    document.getElementById(&quot;offset&quot;).onclick = function() {
      whatis(&#39;offset&#39;);
    }
    document.getElementById(&quot;client&quot;).onclick = function() {
      whatis(&#39;client&#39;);
    }
    document.getElementById(&quot;scroll&quot;).onclick = function() {
      whatis(&#39;scroll&#39;);
    }

&lt;!-- language: lang-css --&gt;

    #MainDIV {
      border: 5px solid red;
    }

&lt;!-- language: lang-html --&gt;

    &lt;button id=&quot;offset&quot;&gt;offsetHeight &amp; offsetWidth&lt;/button&gt;
    &lt;button id=&quot;client&quot;&gt;clientHeight &amp; clientWidth&lt;/button&gt;
    &lt;button id=&quot;scroll&quot;&gt;scrollHeight &amp; scrollWidth&lt;/button&gt;

    &lt;div id=&quot;MainDIV&quot; style=&quot;margin:auto; height:200px; width:400px; overflow:auto;&quot;&gt;
      &lt;div style=&quot;height:400px; width:500px; overflow:hidden;&quot;&gt;

      &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;


All Offsetheight Solutions on Gang of Coders

Total of 1 Offsetheight Solutions

What is offsetHeight, clientHeight, scrollHeight?