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

61K

12 июня 2010 года

1 / / 12.06.2010

Здравствуйте. Делаю резиновый сайт. Не оплучается сделать нормальную высоту контейнера, работает только с фиксированным размером. Перепробовал вё что можно, не получается и всё :( Суть в том ещё, что сделано несоклько слоёв, на нижнем слое помещён слой с картинкой фона, который должен так же ресайзится. Может проблема в этом... В коде выделил, то, что добавлял, думая, что это поможет...
Код 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;

ДОБАВИЛ!!!!!!!!!!!/

}

/ДОБАВИЛ!!!!!!!!!!!

#main-body:after

    {display: block;

    clear: both;

    content: ""}

ДОБАВИЛ!!!!!!!!!!!/

#content

    {position: relative;

    z-index: 3;

    float:right;

    margin-top: 20px;

    width: 80%;

    height: 100%;

/ДОБАВИЛ!!!!!!!!!!!

    overflow: auto;

ДОБАВИЛ!!!!!!!!!!!/

    background-color: #0000FF;}

#sidebar

    {position: relative;

    z-index: 3;

    float:left;

    width:20%;

    height: 100%;

/ДОБАВИЛ!!!!!!!!!!!

    overflow: auto;

ДОБАВИЛ!!!!!!!!!!!/

}