title: Need clientHeight without padding
body: <p>I need to size a vertical range control based on the available height in the browser.  I just about have it, except I think there is some type of a padding/border/margin issue that I can't get around.  Although it sizes itself according to the height of the browser, my range control always goes off the bottom of the page by a few pixels. </p>
  
  <p>This is how I'm getting the height:<br></p>
  
  <pre><code>var height = window.innerHeight 
  || document.documentElement.clientHeight
  || document.body.clientHeight;
  </code></pre>
  
  <p>then using it to set the slider height:</p>
  
  <pre><code>document.getElementById("slider").setAttribute('style', "height :" + height + "px");
  </code></pre>
  
  <p>I know that clientHeight returns the height INCLUDING padding, so I've been thinking that I just need to get the top padding and subtract it.
  Problem is that when I get the padding as shown here, it is zero (alert writes out 0px):</p>
  
  <pre><code>alert("top pad: " + window.getComputedStyle(document.documentElement, null).getPropertyValue('padding-top'));
  </code></pre>
  
  <p>Meanwhile, the CSS for the slider looks like this, so I don't think its own padding/border/margins are responsible:</p>
  
  <pre><code>.sliderStyle {
      height: 860px;
      width: 2%;
      -webkit-appearance: slider-vertical;
      padding-top: 0px;
      margin: 0px;
      border: 0px;
  }
  </code></pre>
  
  <p>The only thing in the body of the HTML is the range control:</p>
  
  <pre><code>&lt;input id="slider" class="sliderStyle"  oninput='' onchange='' type="range"  min="0" max="1000" step="1" value="0"&gt; 
  </code></pre>
  
  <p>Here is the file in its entirety:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Size Control to Browser&lt;/title&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
                  &lt;style type="text/css" media="screen"&gt;
              .sliderStyle {
                  height: 860px;
                  width: 2%;
                  -webkit-appearance: slider-vertical;
                  padding-top: 0px;
                  margin: 0px;
                  border: 0px;
              }
         &lt;/style&gt;
  
      &lt;script type="text/javascript"&gt;
              function start() {
                  var height = window.innerHeight
                                  || document.documentElement.clientHeight
                                  || document.body.clientHeight;
                 alert('clientHeight: ' + height);
                 alert("top pad: " + window.getComputedStyle(document.documentElement, null).getPropertyValue('padding-top'));
                 alert("top margin: " + window.getComputedStyle(document.documentElement, null).getPropertyValue('margin-top'));
                 document.getElementById("slider").setAttribute('style', "height :" + height + "px");
            }
  
      &lt;/script&gt;
      &lt;/head&gt;
  &lt;body onload='start()'&gt;
      &lt;input id="slider" class="sliderStyle"  type="range"  min="0" max="1000" step="1" value="0"&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>clientHeight alert confirms that height is changing for different browser sizes<br>
  top pad and top margin alerts both return 0px</p>