«Все, что осталось» в макете CSS - PullRequest
Новая
       20

«Все, что осталось» в макете CSS

5 голосов
/ 02 февраля 2011

У меня есть 4 элемента внутри элемента контейнера.Высота элемента контейнера будет равна 100% от окна браузера.4 внутренних элемента будут отображаться вертикально друг на друге (как обычно).Первые два элемента и последний элемент должны иметь «естественную» высоту (то есть: достаточно, чтобы соответствовать их содержанию).Третий элемент должен расширяться, чтобы заполнить пространство, доступное в контейнере, после того, как остальные 3 съедят все, что им нужно.

Итак, это будет выглядеть примерно так:*

Я не могу установить явную высоту для Элемента-1, Элемента-2 или Элемента-4, и при этом я не знаю высоту Контейнера.Я также не знаю естественной высоты Элемента-3;Я планирую использовать overflow-scroll, если он станет больше, чем то, что доступно.Я добавил интервал между элементами для иллюстрации, но между реальными элементами также будет интервал (поля / отступы).

Как этого добиться с помощью HTML / CSS?Если нужно найти компромиссы, чтобы получить приличный макет, я их рассмотрю.Бонусные баллы, если техника применяется горизонтально (что мне иногда нужно).

Ответы [ 2 ]

5 голосов
/ 02 февраля 2011

Во-первых, отличный визуальный эффект.

Во-вторых ... не может быть и речи о javascript?

Обновление

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

http://jsfiddle.net/tsZAV/9/

2 голосов
/ 02 февраля 2011

Есть ряд вещей, которые делают это невозможным в чистом CSS.

  1. Окно браузера может быть короче, чем динамическая высота первых 3 элементов.
  2. Невозможно заставить элемент занять остальную часть высоты контейнера.
  3. CSS - это язык оформления документов, а не язык программирования. Думайте о написании CSS как о наборе правил, которому должна следовать страница, а не как о способе явной установки размеров (хотя вы можете явно задавать размеры).

Это относительно просто сделать с помощью JavaScript, изменяющего размер четвертого элемента. Вам нужно будет прослушать событие resize, чтобы четвертый элемент получил соответствующий размер. Также вам нужно установить значение min-height для элемента-4, если для четвертого элемента недостаточно места.

...