[решено] Растягивать div по всей оставшейся высоте страницы

Ответить
Аватара пользователя
Artem-Samsung

[решено] Растягивать div по всей оставшейся высоте страницы

Сообщение Artem-Samsung »

Изображение

Помогите сверстать.

Сложность в том, как сделать, что бы не прикрепить футтер вниз страницы, а блок div по центру должен быть растянутым физически так как там будет скролл.



Эфект должен быть схожим с вот этим:





HTML код:

Код: Выделить всё

<table style="height:100%" width="100%" border="0">
        <tr>
            <td style="height:200px;">Шапка</td>
        </tr>
        <tr>
            <td>Текст</td>
        </tr>
        <tr>
            <td style="height:100px;">Низ сайта</td>
        </tr>
    </table>
Аватара пользователя
PC_Maniac

Re: [решено] Растягивать div по всей оставшейся высоте страницы

Сообщение PC_Maniac »

Если я правильно понял нужно что то вроде этого:

В css -



Код:

Код: Выделить всё

#wrapper {width: 100%; height: 100%;}
#top {width: 100%;height: 200px;}
#main {width: 100%;height: 100%;}
#bottom {width: 100%;	height: 100px;}

На страницу -



Код:
Аватара пользователя
Artem-Samsung

Re: [решено] Растягивать div по всей оставшейся высоте страницы

Сообщение Artem-Samsung »

Мне подошло вот такое вот решение:





Код:

Код: Выделить всё

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
        <style>
        *{padding:0px;margin:0px;}
        html,body{height:100%;overflow:hidden;}
        .body{position:absolute;left:0px;right:0px;top:0px;height:100%;overflow:hidden;}
        .top{position:absolute;left:0px;right:0px;top:0px;height:200px;background:#bbb;z-
index:2;}
        .content{position:absolute;left:0px;right:0px;top:200px;bottom:100px;background:#eee;
overflow:auto;z-index:1;}
        .bottom{position:absolute;left:0px;right:0px;bottom:0px;height:100px;background:#999;
z-index:2;}
        </style>
</head>
<body>
        <div class="body">
                <div class="top">top</div>
                <div class="content">content</div>
                <div class="bottom">bottom</div>
        </div>
</body>

http://jsfiddle.net/artemhp/tCzZt/
Ответить

Вернуться в «Вебмастеру»