Как растянуть блок на остаточную высоту?

Question

[Avivar]

Здравствуйте.
Бьюсь над одной проблемой - есть 3 блока(левый, по центру и справа). Каждый из блоков должен принимать высоту наибольшего.
Проблема состоит в том, что у правого блока есть 3 элемента(верхний и нижний имеют фоновые картинки с прозрачным фоном, у блока по середине имеется узорчатый фон со скругленными краями), два из которых имеют фиксированную высоту(верхний и нижний), а центральный должен растягиваться на всю доступную высоту.

Вот тут набросал код https://jsfiddle.net/6r75tjLb/4/ , в котором не могу сделать блок .right-body растянутым...

Answer 1

[sanex3339]

вот на дивах
https://jsfiddle.net/1bs6h698/

или на таблицах
https://jsfiddle.net/dr26v26k/

PS: может есть более красивое решение?

Попробуйте по убирать содержимое правого блока или добавить содержимое в левый или центральные блоки

Comments

[Avivar]

Выбрал Ваш вариант на дивах, сам почти также сделал, но не указал пару свойств и у меня моя реализация не работала.

Answer 2

[littleguga]

Может так:
https://jsfiddle.net/fczm675a/

Answer 3

[IceJOKER]

htmlbook.ru/css/calc

Comments

[Avivar]

Тоже думал об этом решении, но отбрасывал его, из-за того, что мобильные платформы не поддерживают. Но как решение отмечу, возможно в будущем будет поддержка на всем.

Answer 4

[Андрей Федоров]

Надеюсь я правильно понял задачу... Добавьте в свой css.

.right {
  position: relative;
}
.right-bot {
  position: absolute;
  bottom: 0;
}