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

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

076881fbd8d94593b12a2a86d2891a0e.png

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

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

Всем заранее спасибо за ответы.
  • Вопрос задан
  • 923 просмотра
Решения вопроса 1
AppFA
@AppFA
Frontend developer at Yandex
Пригласить эксперта
Ответы на вопрос 2
@burtulug
Если header и footer с position: absolute, блоку content надо задать вертикальные отступы равные высоте хэдера и футера - margin: 70px 0 100px;
Ответ написан
Комментировать
bugo_aneo
@bugo_aneo
Верстальщик по жизни, буддист, кофеман
jsfiddle.net/AdQ3P/346 - может это поможет??

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы