-
Вебмастеру
(
http://forum.oszone.net/forumdisplay.php?f=22)
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>
|
Если я правильно понял нужно что то вроде этого:
В 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.
© OSzone.net 2001-