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

div高度调整

回答

相关问题