动态容器高度（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了解更多信息。