动态 DIV 容器高度

Question

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

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

div 容器

而且，是的，问题是：当窗口调整大小（或其他布局更改）时，我如何获得红色动态。 有没有没有 javascript ，只有 CSS(3) 的解决方案？

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

附加信息

我已经在 JS (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 });

Answer 1

使用绝对定位，你可以这样做： 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>

Answer 2

您可以为此使用 css 网格：

.parent {
    grid-template-rows: auto 1fr auto;
}

参考：煎饼堆栈

Answer 3

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

Answer 4

不知道我是否遗漏了一些东西，但这就是 div 和所有块级元素如何自然地反应，你所要做的就是正确地包含它们而不是给它们一个固定的高度，因为它们默认具有height: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

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

演示

动态 DIV 容器高度

问题描述

4 个解决方案

解决方案1
3 已采纳 2012-03-19 22:38:31

解决方案2
0 2020-07-29 16:54:11

解决方案3
0 2012-03-19 22:27:59

解决方案4
0 2012-03-19 22:51:22

动态 DIV 容器高度

问题描述

4 个解决方案

解决方案1 3 已采纳 2012-03-19 22:38:31

解决方案2 0 2020-07-29 16:54:11

解决方案3 0 2012-03-19 22:27:59

解决方案4 0 2012-03-19 22:51:22

解决方案1
3 已采纳 2012-03-19 22:38:31

解决方案2
0 2020-07-29 16:54:11

解决方案3
0 2012-03-19 22:27:59

解决方案4
0 2012-03-19 22:51:22