Home/ Questions/Q 1094943
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T00:02:49+00:00

UPDATE: I think there was too many information. Here’s my question: how to make

  • 0

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;

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0