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

Question

[danilr]

Есть блок wrapper c 3 div внутри, надо блок с классом content растянуть на всю ОСТАВШУЮСЯ ширину(на свободное пространство экрана без скрола)?

<div class="wrapper">
    <div class="header">header</div>
    <div class="content">content</div>
    <div class="footer">footer</div>
  </div>

.wrapper{
  height: 100%;
}
.header{
  min-height: 70px;
}
.footer{
  min-height: 140px;
}
.content{
  height: ???;
}

Блоки хедер и футер могут быть любой высоты, поэтому свойство calc нельзя. content height: 100% ставит ширину родителя, то есть появляется скролл. Как правильно растягивать на сободную высоту экрана?
И еще wrapper flexом делать крайне не желательно, так как это обертка для всех компонентов.

Comments

[Сергей delphinpro]

.wrapper {
  min-height: 100vh;// в IE присутствует баг (!)
  display: flex;
  flex-direction: column;
}
.content {
  flex-grow: 1;
}
.header, .footer {
  flex-shrink: 0;
}

[Сергей delphinpro]

И еще wrapper flexом делать крайне не желательно, так как это обертка для всех компонентов.

no problem

<div class="wrapper">
  <div class="site">
    <div class="header">header</div>
    <div class="content">content</div>
    <div class="footer">footer</div>
  </div>
  ...other compoenents
</div>

.site { display: flex; ...}

Answer 1

[dicem]

Comments

[danilr]

не совсем понял, а для чего тут переменная?)

[dicem]

danilr, она не нужна, я прост думал сначала по другому реализовать, а оно взяло и просто так сработало XD