Resizable div not responding to percentage height

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.

I want the resizable div to have a max height of 70% and min height of 30% (originally starting point)

Added a picture for reference

I have the follwoing code setup

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<body>
<div class="wrapper">
<div class="div">
<h4>header</h4>
<h4>header</h4>
<h4>header</h4>
<h4>header</h4>
<h4>header</h4>
<h4>header</h4>
<h4>header</h4>
<h4>header</h4>
<h4>header</h4>
<h4>header</h4>
</div>
<div class="resizable" id="resizable">

CSS

  .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;
}

$("#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+"%"
        });
    }
});

درباره سایت

آخرین مطالب

امکانات وب

Resizable div not responding to percentage height

Vote count: 0

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه