Высота крайних DIV по высоте среднего

[Frie]

<div id="primary_content">

<div id='background_content_left'></div>

<div id='center'></div>

<div id='background_content_right'></div>

</div>

#primary_content{

width:736px;

min-height:600px;

margin-left:26px;

float:left;

margin-top:31px;

}

#background_content_left{

background-image: url("img/background_content_left.png");

width:17px;

height:100%;

background-repeat:repeat-y;

float:left;

}

#center{

width:699px;

min-height:600px;

float:left;

}

#background_content_right{

background-image: url("img/background_content_right.png");

width:20px;

height:100%;

background-repeat:repeat-y;

float:left;

}

В общем, в блоке #primary_content есть три блока, крайние это тени, нужно чтобы они растягивались по высоте дива #center.

Если я ставлю чёткую высоту у крайних то всё нормально, но высота всегда динамическая, по-этому она должна меняться относительно высоты центрального дива.

Подскажите пожалуйста как сделать кроссбраузерное решение, ie6 - не имеет значения =)

Edited February 2, 2012 by Frie

[tius]

Если это тени, то есть box-shadow и соответсвующие filter для IE.

http://jsfiddle.net/7rBEX/

реализация на display: table + display: table-cell

отсюда нерабочий вариант для ие7

Edited February 2, 2012 by tius

[Frie]

  On 2/2/2012 at 7:30 AM, tius said:

Если это тени, то есть box-shadow и соответсвующие filter для IE.

http://jsfiddle.net/7rBEX/

реализация на display: table + display: table-cell

отсюда нерабочий вариант для ие7

я в курсе насчёт box-shadow но в ие это не работает =)

я хочу тупо картинками, чтобы они растягивались по высоте среднего дива. больше мне ничего не надо =)

[DStereo]

Попробуйте faux columns.

[Frie]

  On 2/2/2012 at 8:24 AM, DStereo said:

Попробуйте faux columns.

жесть .. ничего не понял

[DStereo]

  On 2/2/2012 at 8:46 AM, Frie said:

жесть .. ничего не понял

Смысл в том, что реализовать то, что вы хотите, можно либо через таблицы, либо через javascript. Есть еще метод faux columns, т.е. физически мы не растягиваем боковые колонки, а добавляем фон для блока которые содержит все колонки (боковые и центральную), который тянется по высоте контента. Таким образом создается впечатление, что колонки растянуты идентично центральной.

[tius]

Вообще есть более простое решение.

Два слоя — один в другом. Каждому из них приписываются в качестве бэкграунда соответствующие картинки с тенью, повторяющиеся по y-оси.

Пример (свойство border заменить на background): http://jsfiddle.net/3wrgf/

[bob_24]

Проще добавить всем трем колонкам

padding-bottom:32767px;
margin-bottom:-32767px;

и картинку с тенью зарепитить по y

Edited February 2, 2012 by bob_24

[Switch74]

могу предложить такой вариант:

<style>
.shadow{
   position:relative;
   padding:0px 5px;}
.shadow-left{
   position:absolute;
   top:0px;
   left:0px;
   bottom:0px;
   width:5px;
   background:#999;}
.shadow-right{
   position:absolute;
   top:0px;
   right:0px;
   bottom:0px;
   width:5px;
   background:#999;}
#content{
   background:#ccc;}
</style>
<div class="shadow">
   <div id="content">
      content
   </div>
   <div class="shadow-left"></div>
   <div class="shadow-right"></div>
</div>

а еще можно так:

<style>
#content{
	margin:0px 5px;
	position:relative;
	background:#ccc;}
.shadow-left{
	position:absolute;
	top:0px;
	left:-5px;
	bottom:0px;
	width:5px;
	background:#999;}
.shadow-right{
	position:absolute;
	top:0px;
	right:-5px;
	bottom:0px;
	width:5px;
	background:#999;}
</style>
<div id="content">
	content
	<div class="shadow-left"></div>
	<div class="shadow-right"></div>
</div>

или так:

<style>
#content{
	padding:0px 5px;
	position:relative;
	background:#ccc;}
.shadow-left{
	position:absolute;
	top:0px;
	left:0px;
	bottom:0px;
	width:5px;
	background:#999;}
.shadow-right{
	position:absolute;
	top:0px;
	right:0px;
	bottom:0px;
	width:5px;
	background:#999;}
</style>
<div id="content">
	content
	<div class="shadow-left"></div>
	<div class="shadow-right"></div>
</div>

в каждом варианте свои нюансы

Edited February 2, 2012 by Switch74