div height adjustment_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2022-12-14 12:29 出处：网络

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

相关专题：css

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.