Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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.
Ответить с цитированием
  #2 (permalink)  
Старый 13.01.2012, 14:41
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

такой вариант не подойдет

<style type='text/css'>
.wrap {
    height:300px; 
    width:300px; 
    position:relative; 
    border: 1px solid;
}
.top {
    height: 50px;
    background: #eee;
        
}
.center {
    position:absolute;
    width: 100%;
    left: 0; 
    top: 50px; 
    bottom: 40px;
    background: #00f;
}
.bottom {
    position: absolute;
    width: 100%;
    left: 0; 
    bottom: 0;
    height: 40px;
    background: #f00;
}
</style>
  
<div class=wrap>
	<div class=top>123</div> 
	<div class=center>456</div>
	<div class=bottom>789</div>
</div>
Ответить с цитированием
  #3 (permalink)  
Старый 13.01.2012, 15:42
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,217

Rootpassword, в твоих примерах нет ни строк, ни таблиц, ни ячеек...
Сообщение от Rootpassword
Не работает в IE
Потому как
display:table-cell;

Не все поддерживают...
http://htmlbook.ru/css/display

Как тут не вспомнить классику:
- Есть король - ходи с короля! (с)

Последний раз редактировалось ksa, 13.01.2012 в 15:44.
Ответить с цитированием
  #4 (permalink)  
Старый 17.01.2012, 22:28
Server
Отправить личное сообщение для Rootpassword Посмотреть профиль Найти все сообщения от Rootpassword
 
Регистрация: 26.09.2011
Сообщений: 252

Pavel M., благодарю. Код очевидный и работает, хотя я такое проверял и не вышло - наверное, в 4 утра мысли не собираются.
ksa, так не работает в ИЕ8(который уже поддерживает) и в Опере. Работает, если доктайп убрать и Опера - ИЕ сваливаются в режим старой совместимости, что уже признак того, что так не делать, ибо чревато.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Кроссбраузерная вёрстка + резиновый input zukalo (X)HTML/CSS 5 30.08.2011 14:42