Установите высоту нескольких контейнеров на оставшуюся высоту между двумя фиксированными divs

Question

Я пытаюсь показать, что мой сайт хорошо отображается на мобильных устройствах. У меня заголовок, прикрепленный к вершине, высота 70 пикселей. У меня есть главное меню, как нижний колонтитул, закрепленный на дне с высотой 250 пикселей.

Содержание между несколькими изображениями один за другим. Я хотел бы каждого изображения, чтобы взять ровно оставшуюся высоту между «заголовком» и «нижним колонтитулом».

Мне нужно это для работы на мобильных устройствах в целом, поэтому я не хочу устанавливать высоту изображения на статическую высоту (то есть: на устройстве 320x480 я мог бы рассчитать высоту 480-70- 250 = 160 пикселей, но мне нужно, чтобы он также работал на устройстве размером 360х640 пикселей).

Answer 1

Вы должны смотреть вверх CSS Calc https://css-tricks.com/a-couple-of-use-cases-for-calc/, а также видовые единицы https://css-tricks.com/the-lengths-of-css/

Вы могли бы сделать что-то вроде:

height: calc(100vh - 70px - 250px) 

Answer 2

Использование JQuery, установить высоту изображения, чтобы быть высота окна минус высоту заголовка и нижнего колонтитула:

$('img').height($(window).height() - 70 - 250); 

JSFiddle to demo.