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

Показать полную графическую версию : [решено] Растягивать div по всей оставшейся высоте страницы

Artem-Samsung

07-11-2011, 18:00

http://savepic.su/635503.jpg
Помогите сверстать.
Сложность в том, как сделать, что бы не прикрепить футтер вниз страницы, а блок div по центру должен быть растянутым физически так как там будет скролл.

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

<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

Если я правильно понял нужно что то вроде этого:
В 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

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

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