Показать сообщение отдельно
  #1 (permalink)  
Старый 12.01.2012, 23:54
Server
Отправить личное сообщение для Rootpassword Посмотреть профиль Найти все сообщения от Rootpassword
 
Регистрация: 26.09.2011
Сообщений: 252

кроссбраузерная верстка с "зажатой" row
Задача. Три строки, верхняя и нижняя имеют фиксированный размер, как и таблица, центральная (456) должна быть ими зажата.
Не работает в IE(растягивается).

<br><br>
<div style=' height:300px; width:300px; position:relative; border:1 px solid; display:table;'>

<div style='display:table-row;'>
<div style='width:100%; height:50px; border:1px solid; display:table-cell;'>123</div>
</div>

<div style='display:table-row;'>
<div style='width:100%; height:100%; border:1px solid; display:table-cell;'>456</div>
</div>

<div style='display:table-row;'>
<div style='width:100%; height:40px; border:1px solid; display:table-cell;'>789</div>
</div>
</div>
<br><br>


Так же, в центральную часть пытаемся вставить div с размером, который должен совпасть с размеров вычисленной ячейки. Не работает в ИЕ и в Опере(растягивается).

<br><br>
<div style=' height:300px; width:300px; position:relative; border:1 px solid; display:table;'>

<div style='display:table-row;'>
<div style='width:100%; height:50px; border:1px solid; display:table-cell;'>123</div>
</div>

<div style='display:table-row;'>
<div style='width:100%; height:100%; border:1px solid; display:table-cell;'><div style='width:100%; height:100%; display:block; border:1px solid;'>inside</div></div>
</div>

<div style='display:table-row;'>
<div style='width:100%; height:40px; border:1px solid; display:table-cell;'>789</div>
</div>
</div>
<br><br>


Убирая размеры у центральной части, растягивание исчезает, но теряем доступ к размерам в div=inside для части браузеров()

<br><br>
<div style=' height:300px; width:300px; position:relative; border:1 px solid; display:table;'>

<div style='display:table-row;'>
<div style='width:100%; height:50px; border:1px solid; display:table-cell;'>123</div>
</div>

<div style='display:table-row;'>
<div style='border:1px solid; display:table-cell;'><div style='width:100%; height:100%; display:block; border:1px solid;'>inside</div></div>
</div>

<div style='display:table-row;'>
<div style='width:100%; height:40px; border:1px solid; display:table-cell;'>789</div>
</div>
</div>
<br><br>


Вот как добиться, что бы было и то и то? Пробовал таблицами(same shit), через margin и padding, абсолютным позиционированием, просто блоками без display.
Ответить с цитированием