Проблема с высотой контейнеров

[Hobu4ek]

Здравствуйте. Делаю резиновый сайт. Не оплучается сделать нормальную высоту контейнера, работает только с фиксированным размером. Перепробовал вё что можно, не получается и всё Суть в том ещё, что сделано несоклько слоёв, на нижнем слое помещён слой с картинкой фона, который должен так же ресайзится. Может проблема в этом... В коде жирным выделил, то, что добавлял, думая, что это поможет...

Код html:

<div id="wrap">
<link href="css.css" rel="stylesheet" type="text/css" />
<div id="layerbg">
<img border="0" src="pict/bg.jpg" width="100%" height="100%"></td>
</div>
<div id="header" align="center">
    <div id="topmenu" align="center"></div>
</div>
  <div id="main-body">
    <div id="sidebar"></div>
        <div id="content" align="center">
    <iframe name="cen" height="100%" width="90%" border="0" frameborder="0" marginwidth="1" marginheight="1" src="main.html"></iframe>
    </div>
</div>
<!--end of main-body-->
<div id="footer"></div>
</div>
<!--end of wrap-->

Код CSS:

#wrap
	{position: relative;
	z-index: 2;
	width:80%;
	height: 100%;}

#layerbg
	{position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	left: 0px;
	top: 0px;
	border-width: 0;}

#header
	{position: relative;
	z-index: 3;
	width: 100%;
	height: 184px;
	background-color: #FFFFFF;}
#topmenu
	{position: relative;
	z-index: 4;
	width: 100%;
	height: 30px;
	background-color: #000000;}
#footer
	{position: relative;
	z-index: 3;
	clear:both;
	height: 30px;}
#main-body
	{position: relative;
	z-index: 3;
	float:left;
	width:100%;
	height: 100%;
	overflow: auto;}
[b]#main-body:after
	{display: block;
	clear: both;
	content: ""}[/b]
#content
	{position: relative;
	z-index: 3;
	float:right;
	margin-top: 20px;
	width: 80%;
	height: 100%;
	[b]overflow: auto;[/b]
	background-color: #0000FF;}
#sidebar
	{position: relative;
	z-index: 3;
	float:left;
	width:20%;
	height: 100%;
	[b]overflow: auto;[/b]}

Высота выставлена на 100%, а получаю вот такую фигню (синий фон контейнера сделан для наглядности того, что высота не применима к нему):

Edited June 12, 2010 by Hobu4ek

[Justnewone]

Такое ощущение, что дело в том, что при указании относительных значений высоты оная должна так же указываться до элемента с абсолютным значением, либо до самого верха, до HTML.

Простой пример, если у вас есть 3 дива, вставленных друг в друга и имеющим, соответствующе высоты (начиная от внешнего) 100px, не указана, 100%, то ни второй ни тем более последний в высоту не вытянутся, а стоит среднему дать, допустим 100%, то ситуация сразу будет "как надо".

[Hobu4ek]

Благодарю за ответ. Итак, у меня что-то вроде этого должно быть по структуре:

DIV1, DIV2 - оранжевые, вложенные в DIV0

DIV 1_1, DIV2_1, DIV 2_2 - зелёные, вложенные в DIV1 и DIV2 соответственно

Я так понял вы говорите, что надо задать абсолютный размер для контейнера DIV2 и тогда всё получится???

Но проблема в том, что необходимо сделать так, чтобы DIV2 занимал размер от DIV1 до конца страницы. А как это сделать кроме как относительными размерами я не знаю. Точнее была идея написать ява скрипт, который брал бы значение разрешения экрана по высоте и потом вычитал из него 20, получался бы размер этого контейнера. Но как это реализовать к сожалению не знаю...

заранее благодарен за помощь и поддержку

[Hobu4ek]

Проблема решена, кому интересно, вот итоговый код с яваскриптом:

<div id="wrap">
<link href="css.css" rel="stylesheet" type="text/css" />
<div id="layerbg"></div>
<div id="header" align="center"></div>
</div>
<script language="JavaScript">
var ht=0;
var sz=0;
var sz2=0;
ht = screen.height;
sz = ht-184-60-125;
sz2 = ht-184-60-125-20;
document.write('<div id="main-body" style="height: '+sz+'px;">');
</script>
  <div>
	<div id="sidebar">
	</div>
<script language="JavaScript">
document.write('<div id="content" align="center" style="height: '+sz2+'px;">');
</script>
	<iframe name="cen" height="100%" width="90%" border="0" frameborder="0" marginwidth="1" marginheight="1" src="main.html"></iframe>
	</div>
</div> <!--end of main-body-->
<div id="footer">
  </div>
</div> <!--end of wrap-->
</body>
</html>

[psywalker]

Какой то кривой код. Приведи код полной страницы.