Как правильно сверстать такой дизайн?

Question

[myskypesla]

Есть такой дизайн макет.



Мне нужно сделать так, чтобы блок контент был резиновый, т.е. изменял размер в зависимости от изменения окна браузера, и соответственно относительно высоты данного блока будет изменять положение содержание блока content.
Подскажите как реализовать?

Я сделал header и footer с position: absolute, но тогда блок content не учитывает высоту этих блоков. Тогда я реализовал с помощью скрипта, но хочу узнать как сделать такое с помощью css?

Всем заранее спасибо за ответы.

Answer 1

[Евгений]

На flexbox как-то так:
https://jsfiddle.net/5mwhzr42/

Comments

[myskypesla]

Максим Жаров: Евгений все правильно понял, это не блок а указание на layout который центрируется и имеет ширину 85% и высоту 87%

[Евгений]

Максим Жаров: где вы увидели блок "с лева" ?

[myskypesla]

Спасибо Евгений

[myskypesla]

Евгений Евгений подскажи а почему flex-basis задет высоту? Если везде во всех статьях говорится, что это ширина элемента

[Евгений]

myskypesla: в сочетинии с flex-direction: column мы задаем область которую занимает элемент в данном случае это высота, если был бы row, то тогда была бы ширина (возможно криво объяснил, сорри)

[myskypesla]

Евгений: Ах точно, спасибо огромное, объяснили хорошо. Про direction знаю, и теперь всё понятно.

Answer 2

[burtulug]

Если header и footer с position: absolute, блоку content надо задать вертикальные отступы равные высоте хэдера и футера - margin: 70px 0 100px;

Answer 3

[Полина Емельянова]

jsfiddle.net/AdQ3P/346 - может это поможет??

webcareer.ru/vysota-ravnaya-shirine-na-css.html

И вообще не спалось: codepen.io/emelyanova/pen/KrYyvG - такая штука как vh - может вас спасти.

Comments

[myskypesla]

Евгений уже посоветовал отличный вариант. Который решает все проблемы. Но за ответ спасибо Полина.