动态容器高度 (jQuery)

Question

我有一个固定高度 (180px) 的页眉和固定高度的页脚 (50px)。我希望容器高度为：窗口高度 MINUS 页眉 MINUS 页脚。

如何使用 jQuery 实现这一点？

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

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 的小跨度。

EDIT2： 如果您使用其他一些绝对定位的 div（如工具提示），则必须添加此条件以避免在 IE7 中出现奇怪的闪烁：

<!--[if IE 7]>
    <style type="text/css">
        #header
        {
            position: absolute;
        }
    </style>
<![endif]-->

EDIT3：好像我没有粘贴整个内容。这一点对于让它与 IE6 一起工作是必不可少的。请注意，这不是常见的表达方式之一。

* html body
{
    /* YOU'LL RECOGNIZE THESE NUMBERS WITH THE EXAMPLE ABOVE */
    padding: 83px 0 39px 0;  
}

* html #contents
{
    height: 100%;
    width: 100%;
}

阅读here了解更多信息。