Jquery 动态DIV容器高度

我知道每个网络开发者都讨厌这个话题，但不管怎样。。。我没有找到解决这个问题的好办法

我有三个div，两个静态的（灰色的）和一个动态的（红色的）。 该图像描述了整个窗口。例如在聊天应用程序中

而且，是的，问题是：当窗口调整大小（或其他布局更改）时，如何使红色的窗口保持动态。 有没有没有没有没有javascript的独奏曲，只有CSS（3）

---

编辑：条件：底部的DIV应该留在窗口底部，对不起

补充资料

我已经在JS（jQuery）中完成了，但我认为这根本不是一个好的实践。（中间DIV的resize方法必须在每个“布局更改事件”中实现）

示例如下：

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 });

---

您可以使用绝对定位并同时指定顶部和底部位置。

使用绝对定位，您可以执行以下操作：

#div1，div2，div3{位置：绝对；}
#第一组{
边框：3px实心#eee；
高度：30px；
顶部：0；左侧：0；右侧：0；
}
#第二组{
边框：3px实心#e00；
顶部：30px；底部：30px；
左：0；右：0；
}
#第三组{
边框：3px实心#eee；
高度：30px；
顶部：自动；
底部：0；左侧：0；右侧：0；
}
顶部
中间的
底部

我不知道我是否遗漏了什么，但这就是div和所有块级元素自然反应的方式，您所要做的就是正确地包含它们，而不是给它们一个固定的高度，因为默认情况下它们具有

高度：auto

。请尝试此设置，例如：

HTML

<div class="container">
    <div class="header">
        This is a header
    </div>
    <div class="content">
        This is a content div
    </div>
    <div class="footer">
        This is a footer
    </div>
</div>

---

您可以为此使用css网格：

.parent{
网格模板行：自动1fr自动；
}

---

参考资料：

这是一个很好的解决方案。只是边界必须贯彻到顶部和底部。让我开心一天，谢谢“条件：底部的DIV应该留在窗口底部”

<div class="container">
    <div class="header">
        This is a header
    </div>
    <div class="content">
        This is a content div
    </div>
    <div class="footer">
        This is a footer
    </div>
</div>

.container {
    width:378px;
    margin:0 auto;
    padding:10px;
    background-color:#fff;
    border:1px solid #515151;
}

.header, .footer {
    height:60px;
}

.header {
    background-color:#00B4FF;
}

.footer {
    background-color:#515151;
}

.content {
    border:1px solid #000;
    margin:10px 0;
    padding:10px;
}