Как сверстать такой layout?

Последнее время часто приходится верстать разметку следующего общего вида:

Чёрный блок может опционально иметь фиксированный размер (в конкретном случае так и есть), синий блок занимает размер в зависимости от содержимого, а красный (основная сложность) должен быть растянут по вертикали на оставшееся пространство.
Как вообще делается такая разметка? Есть ли НЕкостыльные решения на CSS2? Ибо height:100%, как известно, работает не так, как хотелось бы в этом случае.
Интересуют также аналогичные горизонтальные разметки.
  • Вопрос задан
  • 4466 просмотров
Решения вопроса 1
UZER2006
@UZER2006 Автор вопроса
В общем, остановился на варианте, что без JS это реализовать невозможно.
Ближе всего было решение с display:table и display:table-row.
Всем спасибо!
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 7
mdss
@mdss
горизонтальный вариант
jsfiddle.net/mdss/RXBUD/
Ответ написан
Комментировать
Сделал через table, table-caption и table-row. Должно работать в IE8+. С фиксированной высотой делал через паддинг и display: absolute; или паддинг и box-sizing: border-box;.

http://jsfiddle.net/z7huU/1/
Ответ написан
PaulZi
@PaulZi
На чистом CSS2 без JS вряд ли такое получится. По крайней мере со всеми условиями (чтобы и overflow-y был, и не фиксированная шапка).
Ну а в CSS3 для этого есть Flexbox layout.
Я бы рекомендовал применить небольшой JS-скриптик, вычисляющий высоту блока с overflow-y и применяющего его.
Ответ написан
pxx
@pxx
Продолжая тему эмуляции таблиц: jsfiddle.net/KYPX7/
C разбегу работает в IE8+, но разметка вызывает кислую мину на лице.
Ответ написан
VoidVolker
@VoidVolker
Имхо, проще всего зафиксировать верхний блок:
position: fixed;
А весь остальной контент будет прокручиваться стандартным скроллом браузера. Если же использовать js — то в сети много готовых вертикальных слайдеров контента.
Я вот сейчас занят аналогичной задачей — только прокрутка горизонтальная. В итоге пришел к выводу, что проще всего будет найти готовый js-скрипт.
Ответ написан
Комментировать
truekenny
@truekenny
А чем вариант quorra.ru/#10c8f6b6f25e89d9fd7b69bcdc1e3b4d-9-8 не подходит?
Для IE6 смотреть в отдельном окне quorra.ru/pages/10c8f6b6f25e89d9fd7b69bcdc1e3b4d.html
(Важно DOCTYPE Transitional)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы