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%;但它看起来丑陋)
答
可以使用位置做到这一点:固定的,虽然这个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。
+0
嘿,这似乎工作完美!谢谢!使用位置:固定;对于所有的是相当整洁,虽然它不是真的与IE浏览器现在工作:) – mathon12 2009-12-14 20:29:28
+0
我认为它现在在IE8的作品 – WilliamLou 2009-12-23 22:46:01
格式化似乎搞砸了,对不起。 – mathon12 2009-12-14 20:12:56
^感谢您的修复。 – mathon12 2009-12-14 20:30:38