Question

我有一个设置，需要一个标题div和一个页脚div分别保持在页面的顶部和底部，而中间的内容div填充其间的区域。内容div设置为overflow：auto;因此当内容量足够大时会出现滚动条。像这样：

+----------------------------------------------+                 <-
|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的位置为：fixed;内容的高度为：100％;但看起来很可怕。）

Answer 1

你可以使用position：fixed来做到这一点，虽然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，包括其他示例。

div高度调整

1 个答案: