javascript - 一次调整两个 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 以停止移动。

这里有两种解决方案:

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>