Компьютерный форум OSzone.net  

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)
-   Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)
-   -   [решено] Растягивать div по всей оставшейся высоте страницы (http://forum.oszone.net/showthread.php?t=219909)

Artem-Samsung 07-11-2011 18:00 1790472

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

Помогите сверстать.
Сложность в том, как сделать, что бы не прикрепить футтер вниз страницы, а блок 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 24-11-2011 11:41 1802251

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

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

На страницу -
Код:

<div id="wrapper">

    <div id="top"></div>
    <div id="main"></div>
    <div id="bottom"></div>

</div>


Artem-Samsung 01-12-2011 13:17 1807204

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

Код:

<!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/


Время: 20:56.

Время: 20:56.
© OSzone.net 2001-