动态容器高度（jQuery）

我有一个固定高度（180px）的标题和固定高度的页脚（50px）。 我希望容器高度为：窗口高度MINUS标题MINUS页脚。

我如何使用jQuery实现这一目标？

编辑添加：如果在窗口resize时更新容器高度，那就太棒了！

Answer 1

无需使用jquery。

使用css（我标记了使其工作的关键点，您可以相应地更改值）：

#header { top: 0; left: 0; width: 100%; height: 80px; /* KEY POINT */ overflow: hidden; } #footer { position: absolute; /* KEY POINT */ bottom: 0; left: 0; width: 100%; height: 36px; /* KEY POINT */ overflow: hidden; } #contents { position: fixed; /* KEY POINT */ top: 83px; /* KEY POINT */ left: 0; right: 0; bottom: 39px; /* KEY POINT */ right: 0; overflow: auto; } 

结果如下：

 |----------------------------------------| | div#header | | (80px height) | |----------------------------------------| | | | div#contents | | (top 83px, bottom 39px) | | | |----------------------------------------| | div#footer | | (36px height) | |----------------------------------------| 

这模拟旧帧。 在这个例子中，每个div之间有一个3px的小跨度。

编辑2 ：如果你使用其他绝对定位的div（如工具提示），你必须添加这个条件，以避免在IE7中出现奇怪的闪烁：

EDIT3 ：好像我没有粘贴整个东西。 这个位对于使用IE6非常重要。 请注意，这不是通常的表达方式之一。

 * html body { /* YOU'LL RECOGNIZE THESE NUMBERS WITH THE EXAMPLE ABOVE */ padding: 83px 0 39px 0; } * html #contents { height: 100%; width: 100%; } 

在这里阅读更多信息。