div height adjustment
I have a setup that requires a header div and a footer div to stay rooted at the top and bottom of the page respectively, while the content div in the middle fills up the area in between. The content div is set to overflow:auto; so a scroll bar appears when content volume is large enough. Something like this:
+----------------------------------------------+ <-
|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 | |
+--------------------------------------------开发者_如何学Go--+ <-
I want the content div alone to change its height in a way that the combination of the three fill the whole window. Is it possible to do it with CSS alone? Thanks.
(Currently the header and footer divs have position:fixed; and content has height:100%; but it looks hideous.)
You can do it using position:fixed, although IE support for this is not great. Here's something you might be able to use:
<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>
See here for more information, including another example.
加载中,请稍侯......
精彩评论