動態容器高度（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瞭解更多信息。