我怎样才能实现,蓝色框填充 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/