title: Resizable div not responding to percentage height
body: <p>I have 2 divs within a parent, one has .resizable, however i want it to have a max height in percentages, I have found the code that manages to resize the DOM, but i can't get it to work for me, I have got pretty close.</p>
  
  <p>I want the resizable div to have a max height of 70% and min height of 30% (originally starting point)</p>
  
  <p><a href="http://i.stack.imgur.com/52CKU.png" rel="nofollow">Added a picture for reference</a></p>
  
  <p><a href="https://jsfiddle.net/brad211/87L7sfLr/2/" rel="nofollow">fiddle</a></p>
  
  <p>I have the follwoing code setup</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"&gt;
    &lt;link rel="stylesheet" href="/resources/demos/style.css"&gt;
  &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
  
  &lt;body&gt;
  &lt;div class="wrapper"&gt;
  &lt;div class="div"&gt;
  &lt;h4&gt;header&lt;/h4&gt;
  &lt;h4&gt;header&lt;/h4&gt;
  &lt;h4&gt;header&lt;/h4&gt;
  &lt;h4&gt;header&lt;/h4&gt;
  &lt;h4&gt;header&lt;/h4&gt;
  &lt;h4&gt;header&lt;/h4&gt;
  &lt;h4&gt;header&lt;/h4&gt;
  &lt;h4&gt;header&lt;/h4&gt;
  &lt;h4&gt;header&lt;/h4&gt;
  &lt;h4&gt;header&lt;/h4&gt;
  &lt;/div&gt;
  &lt;div class="resizable" id="resizable"&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>  .wrapper {
    position: absolute;
    width: 100%;
    height: 100vh;
  }
  
  
  
  .div {
    position: relative;
    width: 100%;
    height: 70%;
    overflow: scroll;
    background-color: #0098ff;
  }
  
  .resizable {
    position: relative;
    border-top: 5px solid green;
    width: 100%;
    height: 30%;
    background-color: red;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$("#resizable").resizable({
      autoHide: true,
      handles: "n",
      stop: function(e, ui) {
          var parent = ui.element.parent();
          ui.element.css({
              height: ui.element.height()/parent.height()*100+"%"
          });
      }
  });
  </code></pre>