调整一次调整两个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>