一次调整两个Div的大小

Question

基本上，我在容器内部有一个底部div和一个顶部div。我需要底部div可调节，顶部div需要跟随它并占据空的空间。我制作了一个简单的jQuery脚本，但它表现得非常不稳定，并且似乎以指数方式扩展了所有内容。

这是我的代码：

var lol = $("#lol").height();
var message = $("#text").height();
$("#message").height(lol - message);

$("#text").resizable({
  handles: 'n',
  resize: function() {
    var lol = $("#lol").height();
    var message = $("#text").height();

    $("#message").height(lol - message);
  }
});

#lol {
  position: absolute;
  top: 150px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid black;
}

#message {
  background: black;
  height: 400px;
  width: 700px;
}

#text {
  background: red;
  width: 700px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://fonts.googleapis.com/css?family=Raleway|Sarina" rel="stylesheet">
<script src='https://www.google.com/recaptcha/api.js'></script>

<div id="lol">
  <div id="message">

  </div>
  <div id="text">

  </div>
</div>

Answer 1

当你调整text的大小时，它会移动div的top。您可以将top重置为0以阻止其移动。

这是2个解决方案：

var lolHeight = $("#lol").height();
var $message = $("#message");
var $text = $("#text");
$message.height(lolHeight - $text.height());

$text.resizable({
  handles: 'n',
  resize: function(event, ui) {
    $message.height(lolHeight - ui.size.height);
    ui.position.top = 0;
  }
});

#lol {
  position: absolute;
  top: 150px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid black;
}

#message {
  background: black;
  height: 400px;
  width: 700px;
}

#text {
  background: red;
  width: 700px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://fonts.googleapis.com/css?family=Raleway|Sarina" rel="stylesheet">
<script src='https://www.google.com/recaptcha/api.js'></script>

<div id="lol">
  <div id="message">

  </div>
  <div id="text">

  </div>
</div>

要么

var lolHeight = $("#lol").height();
var $message = $("#message");
var $text = $("#text");
$message.height(lolHeight - $text.height());

$message.resizable({
  handles: 's',
  resize: function(event, ui) {
    $text.height(lolHeight - ui.size.height);
  }
});

#lol {
  position: absolute;
  top: 150px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid black;
}

#message {
  background: black;
  height: 400px;
  width: 700px;
}

#text {
  background: red;
  width: 700px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link href="https://fonts.googleapis.com/css?family=Raleway|Sarina" rel="stylesheet">
<script src='https://www.google.com/recaptcha/api.js'></script>

<div id="lol">
  <div id="message">

  </div>
  <div id="text">

  </div>
</div>