Question

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

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

the div container

而且，是的，问题是：当窗口调整大小（或其他布局更改）时，如何使红色动态显示。是否存在没有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 });

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

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

Answer 3

不知道我是否遗漏了一些东西，但这就是div和所有块级元素自然反应的方式，所有你需要做的就是正确地包含它们而不是将它们固定在高度上，因为它们具有{{ 1}}默认情况下。请尝试此设置，例如：

<强> HTML

height:auto

<强> CSS

<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>

Demo

Answer 4

您可以为此使用CSS网格：

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

参考：Pancake Stack

动态DIV容器高度

4 个答案: