調整一次調整兩個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>