调整一次调整两个Div

  • Z时代
  • 2024-01-10
  • 分类：问答

所以基本上，我有一个容器内的底部div和顶部div。我需要底部的div可以调节，顶部的div可以跟随它并占据空的空间。我做了一个简单的jQuery脚本，但它的行为非常不正常，似乎以指数方式扩展所有内容。调整一次调整两个Div

这里是我的代码：

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>

回答：

当调整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>

以上是 调整一次调整两个Div 的全部内容， 来源链接： utcz.com/qa/261109.html

回到顶部