gpt4 book ai didi

jquery - 动态改变div的高度到父级

转载 作者:太空狗 更新时间:2023-10-29 15:11:30 25 4
gpt4 key购买 nike

我怎样才能实现,蓝色框填充 div 的剩余位置并在绿色框变大时动态降低其高度?

http://jsfiddle.net/trek711/ncrqb/4/

HTML

<div id="wrap">
<div id="left"></div>
<div id="righttop">
<div id="click">Click!</div>
<div id="box"></div>
<div id="place"></div>
</div>
<div id="rightbot"></div>
</div>

CSS

#wrap {
padding: 5px;
width: 700px;
height: 500px;
background-color: yellow;
border: 1px solid black;
}
#left {
float: left;
margin: 0 5px 0 0;
width: 395px;
height: inherit;
background-color: red;
}
#righttop {
float: left;
padding: 5px;
width: 290px;
background-color: green;
}
#rightbot {
float: left;
margin: 5px 0 0 0;
width: 300px;
height: 60%;
background-color: blue;
}
#click {
width: 50px;
height: 50px;
background-color: red;
}
#box {
display: none;
width: 200px;
height: 100px;
background-color: white;
}
#place {
width: 100px;
height: 120px;
background-color: lightgrey;
}

JS

$("#click").on("click", function (e) {
$("#box").slideToggle("fast");
});

非常感谢!

最佳答案

不幸的是,您无法使用 CSS 完成此操作。但是,slideToggle 确实有一个回调,您可以使用它来调整事物的大小

$("#box").slideToggle(
{ duration: "fast",
progress: function() {
$('#rightbot').height(
$('#wrap').height()
- $('#righttop').height()
- 15 /* margins */)
}
});

并且在 JSFiddle

唯一丑陋的是边距。不过,也可能以编程方式找到它们。

这是唯一可以平滑调整蓝框大小的方法

关于jquery - 动态改变div的高度到父级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18272684/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com