CSS Как сделать три DIV во всю высоту экрана?

Question

[kAIST]

Есть "плашка" фиксированной высоты сверху страницы, так же есть плашка фиксированной высоты снизу страницы. Подскажите пожалуйста, как разместить div с фотографией посередине, чтоб он занимал всю оставшеюся часть страницы? Желательно без костылей и js (как это получается у меня)
jsfiddle.net/9tmPK

Answer 1

[Юрий Лобанов]

codepen.io/iiil/pen/miBrG

Comments

[kAIST]

Но если фотография больше высоты экрана, получается вот так: codepen.io/anon/pen/vnBus
Хочется чтоб фотография растягивалась во всю высоту экрана, с разных устройств будут смотреть.

[Юрий Лобанов]

@kAIST перейдите по ссылке еще раз, переделал. На самом деле у задачи такое количество разных вариантов, что скучно. Если не нужна поддержка старых браузеров - представленный сейчас вариант - оптимальный

[kAIST]

@iiil
height:calc(100% - 200px); спасибо, не знал что так можно )) жаль что мобильные браузеры в пролете.. (( А есть что нибудь более "стандартное"? Или не париться и на js сделать?

[Юрий Лобанов]

@kAIST конечно стоит запариться. Щас что-нить сделаю.

[Юрий Лобанов]

@kAIST да собственно, сделайте все абсолютом ) еще раз по ссылке перейдите. Обратите внимание на свойство background-size

[kAIST]

@iiil огромное спасибо, это как раз то что надо!

Answer 2

[Алексей Павлов]

Вот статья об этом:
css-tricks.ru/articles/Details/InSearchOfTheHolyGrail
Несколько подходов к этой задаче.
(я говорил больше о вопросе в заголовке)

Comments

[kAIST]

Спасибо, но в моем случае div'ы нужно разместить именно вертикально.