gpt4 book ai didi

jquery - 动态 DIV 容器高度

转载 作者:行者123 更新时间:2023-11-27 22:43:03 27 4
gpt4 key购买 nike

我知道每个网络开发人员都讨厌这个话题,但无论如何......我没有找到好的解决方案

我有 3 个 DIV,两个静态(灰色的)和一个动态的(红色的)。该图像描述了整个窗口。例如在聊天应用程序中。

the div container

而且,是的,问题是:当窗口调整大小时(或其他布局发生变化),我如何让红色的动态显示。有没有没有 javascript,只有 CSS(3) 的解决方案?

编辑:条件:底部的 DIV 应该留在窗口底部,抱歉。

附加信息

我已经在 J​​S (jQuery) 中完成了,但我认为这根本不是一个好习惯。 (中间 DIV 的调整大小方法必须在每个“布局更改事件”中实现)。

这里的例子:

var div1 = $('#div1').outerHeight(true);
var div2 = $('#div2').outerHeight(true);
var div3Padding = $('#div3').outerHeight(true) - $('#div3').innerHeight();

$('#div3').css({ height: window.innerHeight - (div1 + div2) - div3Padding });

最佳答案

有了绝对定位,你可以做:http://jsfiddle.net/rQVmK/

<html>
<style type="text/css">
#div1, div2, div3 { position: absolute; }
#div1 {
border: 3px solid #eee;
height: 30px;
top: 0; left: 0; right: 0;
}
#div2 {
border: 3px solid #e00;
top: 30px; bottom: 30px;
left: 0; right: 0;
}
#div3 {
border: 3px solid #eee;
height: 30px;
top: auto;
bottom: 0; left: 0; right: 0;
}
</style>

<div id="div1">Top</div>
<div id="div2">Middle</div>
<div id="div3">Bottom</div>
</html>

关于jquery - 动态 DIV 容器高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9778863/

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