Как прижать нижнюю границу блока к верху подвала?

Question

[Novichok43]

Здравствуйте!
Подскажите пожалуйста как адаптировать высоту блока с небольшим количеством контента? Необходимо прижать нижнюю границу блока с контентом к верхней границе подвала, ну и плюс небольшой отступ. Данный блок имеет свое оформление для выделения: фон, границы и т.д. При бОльшем содержимом все понятно и нормально, но вот когда содержимого не так много, то получается не очень хорошо, образуется пустое пространство между блоком и подвалом.
Схема представлена ниже:

Answer 1

[Китана]

как насчет flexbox
кратко

html, body
  height: 100%

.main
  display: flex
  flex-direction: column
  height: 100%

.body
  flex-grow: 1

.header
  height: 50px
 
.footer
  height: 100px

пример: https://codepen.io/Adara/pen/rwxXLX

Comments

[Novichok43]

Спасибо за ответ!
Думал на счет флекса. Но вопрос со совместимостью... Потому сомнительно. Плюс ко всему у меня блок с контентом со своим оформлением. Как я понял флекс больше подходит когда есть РЯД блоков разной высоты, ну и флекс берет один из них с большей высотой и подравнивает под него все остальные. Так что не знаю...

[Китана]

ну да зависит от того какие браузер поддерживаете, проблемы если только IE11 и ниже.
caniuse.com/#search=flexbox
насчет оформления не поняла чем флексбокс мешает. для отступа можно margin задать

Answer 2

[Миша]

• Шапка и подвал фиксированной высоты

  
  Расчет высоты блока с помощью функции calc().
  

  .content {
    height: calc(100vh - 50px - 50px);
  }

  
  Демо на codepen
  
  
  
• Шапка и подвал нефиксированной высоты

  
  Эмуляция поведения таблицы.
  

  .container {
    display: table;
    height: 100%;
    width: 100%;
  }
  
  .content {
    display: table-row;
    height: 100%;
  }

  
  Демо на codepen
  
  
  Резиновые блоки с помощью flexbox.
  
  

  .container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .content {
    flex-grow: 1;
  }

  
  Демо на codepen