Как сделать DIV,меняющий размер по вертикали

qwertyuiop · March 1, 2008

Подскажите плииз как сделать DIV, меняющий размер по вертикали в зависимости от контента и чтобы он раздвигал родительский слой???

Существует контэйнер с тенью из трх частей,на не? навешивается другой слой-контэйнер,состоящий также из тр?х частей... Средняя часть контэйнера должна раздвигаться

HTML:

<div id="containerShadow">

 <div id="shadowTop"></div>

 <div id="shadowBase"></div>

 <div id="shadowBottom"></div>

 <div id="container">
 <div></div>
 <div></div>
 <div></div>
 </div> 

</div>

CSS:

div#containerShadow
{
 width:922px;
 min-height:755px;
 height:auto;
 margin:0 auto;
 position:relative;
 top:24px;
 text-align:center;
 z-index:1;

}

div#shadowTop {
 width:922px;
 height:17px;
 background:url(../images/backgrounds/body_shadow_top.png) no-repeat top left;
}

div#shadowBase {
 width:922px;
 min-height:720px;
 height:auto;
 padding:28px 0 33px 11px;
 background:url(../images/backgrounds/body_shadow_base.png) repeat-y;
}

div#shadowBottom {
 width:922px;
 height:18px;
 background:url(../images/backgrounds/body_shadow_bottom.png) no-repeat;
}

div#container
{
 width:900px;
 min-height:661px;
 height:auto;
 top:27px;
 left:11px;
 text-align:center;
 background:#FFF;
 z-index:2;
}

homm · March 1, 2008

Предлагаю 2 решения, одно с произвольной высотой блока, другое с заданной минимальной высотой, как у вас.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Пример</title>
 <style type="text/css">
 .shadowed {
 width: 200px;
 margin: 0 auto;
 background: red;}
 .shadowed .shadowed-top {
 height: 30px;
 background: green;}
 .shadowed .shadowed-bottom {
 height: 30px;
 background: blue;}
 </style>
</head>
<body>
 <div class="shadowed">
 <div class="shadowed-top">Верх</div>
 Содержимое Содержимое Содержимое Содержимое Содержимое Содержимое Содержимое Содержимое
 <div class="shadowed-bottom">Подвал</div>
 </div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>Пример</title>
 <style type="text/css">
 .shadowed {
 width: 200px;
 height: 300px;
 margin: 0 auto;}
 .shadowed .shadowed-content {
 min-height: 100%;
 height: auto;
 background: red;
 margin-bottom: -30px;}
 * html .shadowed .shadowed-content {
 height: 100%;}
 .shadowed .shadowed-top {
 height: 30px;
 background: green;}
 .shadowed .shadowed-bottom {
 height: 30px;
 background: blue;}
 .shadowed .shadowed-bottom-cleaner {
 clear: both;
 height: 30px;}
 </style>
</head>
<body>
 <div class="shadowed">
 <div class="shadowed-content">
 <div class="shadowed-top">Верх</div>
 Содержимое Содержимое Содержимое Содержимое Содержимое Содержимое Содержимое Содержимое
 <div class="shadowed-bottom-cleaner"></div>
 </div>
 <div class="shadowed-bottom">Подвал</div>
 </div>
</body>
</html>

qwertyuiop · March 1, 2008

Спасибо за помощь.. Попробоую поковырять :-) Мне кажется внутренний блок у меня выходит за границы внешнего,когда контент прибавляется, из-за позиционирования (absolute и relative вперемешку).. Проблема такая,что никак не получается расположить два контэйнера в 3-D стэке друг над дружкой.. -Верхний с абсолютным позиционированием(он же вложенный),а нижний - относительное.. И когда верхний блок расширяется вниз,то выходит за рамки первого.. А мне бы хотелось,что бы они вместе расширялись!!!

Буду думать..

Sign In

Как сделать DIV,меняющий размер по вертикали

Question

qwertyuiop

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

homm

Link to comment

Share on other sites

qwertyuiop

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information