使用css动态更新容器高度

Question

我想实现一个由3个单元组成的布局;

固定标题（位置：固定;），

B左侧菜单，

C主容器。

A和B，高度固定。

C填补剩余空间（仅剩余高度）。 使用CSS，我该如何实现这个结果呢？

仅当C部分高度小于身体/窗口高度时才会出现问题。

对于以下link，您可以获得如何实现此结果的示例。但只有当你有一列时它才有效。

http://jsfiddle.net/hqCcx/3/

Answer 1

好吧我终于找到了解决方案......

诀窍是将最外层元素的高度设置为100％

而且，制作100％高度的一般规则是在内容容器上设置最小高度。

html, body {height: 100%}

#content {min-height: 100%}

致link工作示例。

Answer 2

您可能不得不使用JavaScript来调整“C”的大小，因为CSS没有填满浏览器窗口。

Answer 3

我认为纯CSS 最接近的是C对象上的min-height。我说“最接近”因为并非所有浏览器都支持此功能，并且它并不总是完全填充垂直空间。这将是一个估计，如果您在C对象下面放置任何内容，如果窗口不够高，无法滚动显示您设置的最小高度，它可能不会出现在浏览器中。

此外，具有百分比值的min-height不会执行任何操作，这就是您在jsfiddle示例中未获得所需结果的原因。您必须使用非百分比值，如300px或其他东西。这是一个jsfiddle，在实践中展示了它。取消注释额外的Test<br />行，看看当内容高于最小高度时会发生什么。

另一种选择是跳转到JavaScript并在页面加载时动态设置C的高度，但这可能会变得混乱（关于跨浏览器的解决方案）。