another CSS height 100% problem_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-16 12:15 出处：网络

UPDATE: I think there was too many information. Here\'s my question: how to make the height of #middle 100% of the remaining space in the following exampl:

相关专题：css height

UPDATE: I think there was too many information. Here's my question: how to make the height of #middle 100% of the remaining space in the following exampl:

<body>
    <div id="big">
   开发者_高级运维     <div id="header"></div>
        <div id="middle"></div>
        <div id="btm"></div>
    </div>
</body>

height of #big, body, html is all 100%.

Height of header and bottom are 120px;

Update: Changed my example to match your updated question

Here's a working example of your layout. Tested in IE8, IE7, Firefox, and Chrome.

The key here is NOT to set this height of middle to 100%. Instead, you position it absolutely, with top and bottom equal to the height of your header and btm elements (in your case, 120px).

If you set the height of the middle element to 100%, it will be the same height as the big element, which is 100% of the body tag, and hence your middle element will be too large, causing horizontal scroll bars.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        html
        {
            height: 100%;
        }
        body
        {
            background-color: #EEEEEE;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        #big
        {
            width: 100%;
            height: 100%;
        }
        #header
        {
            width: 100%;
            background-color: #DDD;
            height: 120px;
        }
        #btm
        {
            width: 100%;
            height: 120px;
            position: absolute;
            bottom: 0px;
            background-color: #999;
        }
        #middle
        {
            width: 100%;
            position: absolute;
            top: 120px;
            bottom: 120px;
        }
    </style>
</head>
<body>
    <div id="big">
        <div id="header">
            header
        </div>
        <div id="middle">
            middle
        </div>
        <div id="btm">
            bottom
        </div>
    </div>
</body>
</html>