title: Shrink to fit a div vertically inside a window
body: <p>I want a window that shrinks to fit the current window.  This <a href="https://jsfiddle.net/smacky311/11n8hL1y/24/" rel="nofollow">Fiddle</a> is very close to what I want to achieve.   To use it simply resize the output window vertically until the blue line gets cutoff.  Then reverse the process. However, I want it to continue to work even if there is padding and/or other elements on the page.  </p>
  
  <pre><code>&lt;div id="output"&gt;&lt;/div&gt;
  
  &lt;div id="sample" class="sampleClass"&gt;
    &lt;div&gt;hello&lt;/div&gt;
    &lt;div&gt;hello&lt;/div&gt;  
    &lt;div&gt;hello&lt;/div&gt;
    &lt;div&gt;hello&lt;/div&gt;
    &lt;div&gt;hello&lt;/div&gt;
    &lt;div&gt;hello&lt;/div&gt;
  &lt;/div&gt;
  
  window.addEventListener("resize", updateDimensions);
  
  
  var originalHeight = document.getElementById('sample').offsetHeight;
  var safeBuffer = 15;
  
  function updateDimensions(){
      var node = document.getElementById('sample');
      var windowDimensions = {width: window.innerWidth, height: window.innerHeight};
      var dimensions = node.getBoundingClientRect();
    var nodeBottom = dimensions.bottom;
    var nodeHeight = node.offsetHeight;
  
    var nodeTop = dimensions.top;
    var windowHeight = windowDimensions.height;
  
    var windowIsCutOff = windowHeight &lt;= nodeBottom;
    var windowIsShowing = windowHeight &gt;= nodeTop;
  
    console.log('windowHeight: ' + windowHeight + ' safeBuffer: ' + safeBuffer);
    console.log('nodeHeight: ' + nodeHeight + ' originalHeight: ' + originalHeight);
    var nodeCanGrowBigger =  (windowHeight - safeBuffer - 10) &gt; nodeHeight &amp;&amp; nodeHeight &lt; originalHeight;
    console.log('nodeCanGrowBigger: ' + nodeCanGrowBigger);
  
    if(windowIsShowing &amp;&amp; windowIsCutOff) {
       console.log('do work');
       shrinkWindow(nodeBottom, windowHeight, nodeHeight);
    }
  
    if(nodeCanGrowBigger){
      growWindow(nodeBottom, windowHeight, nodeHeight);
    }
  }
  
  function growWindow(nodeBottom, windowHeight, nodeHeight){
    var node = document.getElementById('sample');
    var originalHeight = nodeHeight;
    var offset = nodeHeight - windowHeight;
    var newHeight;
    if(offset &gt;= -safeBuffer &amp;&amp; offset &lt;= safeBuffer){
     newHeight = originalHeight;
    }
    else if(offset &gt;= 0){
      newHeight = originalHeight + offset;
      console.log('positive calculation originalHeight: ' + originalHeight + ' offset: ' + offset + ' for newHeight: ' + newHeight);
      }else{
      newHeight = originalHeight - offset;
      console.log('negative', newHeight);
    }
    node.style.height = newHeight + 'px';
    console.log('height attmpted changed to', newHeight);
    console.log('height offset', node.offsetHeight);
    console.log('height style', node.style.height);
  }
  
  function shrinkWindow(nodeBottom, windowHeight, nodeHeight) {
      var node = document.getElementById('sample');
    var originalHeight = nodeHeight;
    //console.log('originalHeight', originalHeight);
    //console.log('nodeBottom:' + nodeBottom + ' windowHeight: ' + windowHeight);
    var offset = nodeHeight - windowHeight;
    //console.log('offset', offset);
    var newHeight;
    if(offset &gt;= -safeBuffer &amp;&amp; offset &lt;= safeBuffer){
     newHeight = originalHeight - (safeBuffer + 1);
    }
    else if(offset &gt;= 0){
      newHeight = originalHeight - offset;
      //console.log('positive calculation originalHeight: ' + originalHeight + ' offset: ' + offset + ' for newHeight: ' + newHeight);
      }else{
      newHeight = originalHeight + offset;
      //console.log('negative', newHeight);
    }
    node.style.height = newHeight + 'px';
    /*
    console.log('height attmpted changed to', newHeight);
    console.log('height offset', node.offsetHeight);
    console.log('height style', node.style.height);
    */
  }
  
  
  .sampleClass {
   padding: 0px;
   height: 300px;
   overflow-y: auto;
   border: solid blue;
   //margin: 10px 300px 10px 25px;
   margin: 0px
   position: 'relative'
  }
  </code></pre>
  
  <p>This JavaScript solution I came up with feels overly complex. It doesn't solve for things like padding, or more content on the page either. Can I solve this problem with plain old CSS or a JS extension?</p>
  
  <p>I know <a href="http://www.telerik.com/kendo-ui" rel="nofollow">Kendo ui</a> has this effect in their Modal windows (at least in the 5 year old version we use).  I'm not open to using Kendo.</p>