div高度調整

我有一個設置，需要一個頭div和頁腳div分別保持在頁面的頂部和底部，而中間的內容div填滿了它們之間的區域。內容div設置爲溢出：auto;所以當內容量足夠大時會出現滾動條。這樣的事情：div高度調整

+----------------------------------------------+     <- 
|header div with fixed height of 90px   |     | 
+----------------------------------------------+     | 
|content div with variable height    ||     | 
|            || <-scroll bar  | 
|            || (if required) | 
|            ||     |- total window height 
|            ||     | 
+----------------------------------------------+     | 
|footer div with fixed height of 60px   |     | 
+----------------------------------------------+     <-

我想單獨的內容div來改變它的高度，以三種方式的組合來填充整個窗口。單獨使用CSS可以做到嗎？謝謝。

（目前頁眉和頁腳的div有位置：固定;以及內容具有高度：100％;但它看起來醜陋）

來源

2009-12-14 mathon12

格式化似乎搞砸了，對不起。 – mathon12 2009-12-14 20:12:56

^感謝您的修復。 – mathon12 2009-12-14 20:30:38

可以使用位置做到這一點：固定的，雖然這個IE支持不大。這裏的東西，你也許可以使用：

<html> 
    <head> 
     <style> 
#header { position: fixed; top: 0px; left: 0px; width: 100%; height: 90px; } 
#footer { position: fixed; bottom: 0px; left: 0px; width: 100%; height: 60px; } 
#content { position: fixed; width: 100%; height: auto; top: 90px; bottom: 60px; overflow: auto } 
     </style> 
    </head> 
    <body> 
     <div id="header">Header</div> 
     <div id="content"> 
      <p>Content</p> 
      <p>Content</p> 
      ...etc... 
      <p>Content</p> 
     </div> 
     <div id="footer">Footer</div> 
    </body> 
</html>

的更多信息，包括另一個例子見here。

來源

2009-12-14 20:20:04

嘿，這似乎工作完美！謝謝！使用位置：固定;對於所有的是相當整潔，雖然它不是真的與IE瀏覽器現在工作:) – mathon12 2009-12-14 20:29:28

我認爲它現在在IE8的作品 – WilliamLou 2009-12-23 22:46:01

回答

相關問題