Member 12635147 Ответов: 0

Изменяемый размер div не реагирует на процентную высоту

У меня есть 2 divs внутри родителя, один имеет .resizable, однако я хочу, чтобы он имел максимальную высоту в процентах, я нашел код, который управляет изменением размера DOM, но я не могу заставить его работать для меня, я подобрался довольно близко.

Я хочу, чтобы изменяемый размер div имел максимальную высоту 70% и минимальную высоту 30% (исходная точка покоя)

Моя скрипка:
играть на скрипке[^]
HTML

Что я уже пробовал:

Моя скрипка:
играть на скрипке[^]
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">


JS
$("#resizable").resizable({
    autoHide: true,
    handles: "n",
    resize: function( event, ui ) {
        var parent = ui.element.parent();
        var height = ui.element.height();

        // Get the min value of height or 70% of parent height
        height = Math.min(height, parent.height() * 0.7);

        // Get the max value of height or 30% of parent height
        height = Math.max(height, parent.height() * 0.3);

        ui.element.css({
            height: height + 'px'
        });
    }
});


CSS
.wrapper {
  position: fixed;
  width: 100%;
  height: 100vh;
}

.div {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  width: 100%;
  height: 70%;
  background-color: #0098ff;
}

.resizable {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 30%;
  background-color: red;
}

0 Ответов