Как я могу заблокировать изменяемый размер div в нижней части страницы?

Question

У меня есть 2 изменяемых размера div в контейнере.Один изменяемый размер div содержится во втором.

<div id="container">
  <div id="div1" class="droppable resizable1">
    <div id="div2" class="droppable resizable2"></div>
  </div>
</div>

На самом деле у меня есть две проблемы с этими элементами, и я думаю, что они связаны между собой.

Во-первых, если я изменяю размер div1, div2 и снова div1 вниз, div2 выходит из контейнера.

Вторая проблема возникает в той жепуть.div2 подходит к тем же тестам, что и в первой задаче, поэтому я думаю, что они связаны между собой.

Я пытался изменить свой CSS, но я не нашел решения.При запуске я подумал, что это происходит из minHeight JQueryUI, поэтому я проверил документацию, но моя функция изменяемого размера выглядит правильно.

Я сделал https://jsfiddle.net/Spydaxx/4ez2xtan/85/, чтобы вы могли видеть, что я пытаюсь сделать.

Я хочу, чтобы два элемента div были зафиксированы внизу и имели изменяемый размер вверх.На самом деле у меня есть некоторые проблемы с позицией при изменении размера, но само изменение размера выглядит хорошо.

Спасибо за вашу помощь и ваше время.

Answer 1

так что, если я правильно понимаю, вы хотите иметь возможность свободно перемещать любой div в пределах установленных ограничений по высоте.если вам не нужны вложенные элементы div, которые я не уверен, будет ли это работать с тем, что вы пытаетесь сделать, это будет работать

<div id="container">
  <div id="div1" class="droppable resizable1"></div>
  <div id="div2" class="droppable resizable2"></div>
</div>

$(".resizable1").resizable({
    handles: 'n',
    containment:'#container',
  minHeight: 100
});
$(".resizable2").resizable({
    handles: 'n',
  containment: '#container',
  minHeight: 50
})

Я не изменил ни один CSS, поэтому я не сделалвключите код здесь.просто не вкладывайте div и меняйте контейнер на div2