1

假设以下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，也就是说，我不能以像素或百分比为单位指定任何高度。

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

4

3 回答 3

1

您不能使用 css 执行此操作，您需要使用 javascript 或 jquery

在内容容器上设置最小高度

于 2013-01-31T12:54:54.737 回答
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;
}
于 2013-01-31T12:48:21.743 回答
0

您可能会将#main 元素限制为特定高度，因为这是我能想到的唯一条件，您将在哪里使用它。您应该已经知道 body 元素将根据标题、主体和正文高度自动缩放，因此您在问题中陈述的等式将始终正确，除非使用填充/边距。在这种情况下，只需使用最大高度：

#main {
    max-height: 100%;
}

这将 #main 元素限制为 100% 的高度，或整个页面。

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

于 2013-01-31T12:43:19.637 回答