Question

假设以下html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="header">
            <!-- dynamic height -->
        </div>
        <div id="main" style="overflow: scroll;">
            <!--
                contains actual content
                height should be whatever is left over
            -->
        </div>
        <div id="footer">
            <!-- dynamic height -->
        </div>
    </body>
</html>

基本上我想要的是：

main height = body height - (header height + footer height)

正文和html高度为100％。

由于header和footer的高度都是动态的（会经常变化），我需要一种动态的方法来设置main的高度，即我不能指定任何高度，以像素或百分比表示。

确实存在其他类似问题，但我不是在寻找“浮动/粘性页脚”，main div 必须具有剩余高度。

Answer 1

您必须指定页脚和标题的高度。

您可以在文档上使用javascript来设置页脚，页眉和主div的高度。

然后，使用这样的css：

#header{
  position: absolute;
  top: px;
  height: /*dynamically set by javascript*/;
  left: px;
  right: px;
}

#footer {
  position: absolute;
  bottom: 0px;
  height: /*dynamically set by javascript*/;
  left: 0px;
  right: 0px;
}

#main {
  position: absolute;
  bottom: /* set by javascript with height of footer */;
  top: /* set by javascript with height of header */;
  left: 0px;
  right: 0px;
}

Answer 2

你不能用css做这个，你需要使用javascript或jquery

Set a min-height on content container

Answer 3

你可能会将#main元素限制在一个特定的高度，因为这是我能想到你将要使用它的唯一条件。您应该已经知道body元素将根据标题，主体和主体高度自动缩放，因此除非使用填充/边距，否则您在问题中声明的等式将始终为true。在这种情况下，只需使用max-height：

#main {
    max-height: 100%;
}

这会将#main元素限制为100％高度或整页。

我相信这不是你想要的，所以也许你想澄清一下你为什么要这样做？我们或许可以提出替代解决方案。

如何填充两个动态div之间的垂直空间？

3 个答案: