All geek questions in one place

Another 100% CSS Height Problem

UPDATE: I think there was too much information. Here is my question: how to make the height #middle 100% of the remaining space in the following example:

<body>
    <div id="big">
        <div id="header"></div>
        <div id="middle"></div>
        <div id="btm"></div>
    </div>
</body>

height #big, body, html - all 100%.
The height of the header and bottom is 120 pixels;

+3
source share
1 answer

Refresh . My example is modified according to the updated question.

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

middle 100%. , top bottom header btm ( 120px).

middle 100%, , big, 100% body, , , middle , .

<!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>
+2

Source: https://habr.com/ru/post/1765418/

More articles:


All Articles