CSS: фиксированый заголовок и резиновый iframe

Question

[ChemAli]

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



«Шапка» фиксированной высоты, 100 пкс. «Контент»-iframe занимает все оставшееся пространство.

Как?

Песочница для опытов: jsfiddle.net/Yy9vF/12/

Answer 1

[Олег Матрозов]

А старое-доброе табличное решение вам не подойдет? Прикол в том, что iframe внутри td расширяется только на его размер, таким образом если создать таблицу с двумя ячейками и таблице указать 100% высоты а первой ячейке 100 пикселей, то оставшаяся ячейка займет остаток пространства, а размещенный в ней фрейм не вылезет за его рамки.
Как то так: jsfiddle.net/KqrPd/

Comments

[vanxant]

Таблица вообще идеальный вариант, если нужно кроссбраузерно и безджаваскриптово сделать высоту 100% экрана. Все остальное требует очень много танцев с бубном.

[Олег Матрозов]

Еще такого же эффекта можно добиться, если поместить фрейм в див у которого «display: table-cell», но это уже не работает в IE 6-7

[ChemAli]

Не работает у меня ваш вариант, увы (Опера11, ФФ4). Только в Сафари, да и то со скроллингом.

[ChemAli]

В песочнице не работает, в браузере завертелось. Все, всем спасибо, все красавчики!

Answer 2

[ertaquo]

Так не пойдет?
.content
{
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;

background-color: #8cc;

overflow: auto;
}

Comments

[ChemAli]

Черт, на блоках все нормально, но я имел глупость не уточнить: блок .content — это iframe. На блоках работает, а на фрейме — нет.

[ChemAli]

Обновил песочницу.

Answer 3

[Кирилл Длусский]

jsfiddle.net/Yy9vF/39/
Решение без таблиц, но и без поддержки большинства браузеров
Собственно призвано лишь обратить ваше внимание на свойство box-sizing)
(видимо из-за стилей в jsfiddle добавляется где-то маленький отступ, из-за чего появляется прокрутка. В браузере такого не будет)

Comments

[ChemAli]

Спасибо за помощь. Мы уже провели рефакторинг и сделали из фиксированной панели выплывающую. В любом разе ваше решение будет полезно всем тем, кто придет сюда из поисковика. Вы молодец!