Занять div`ом всю оставшуюся высоту. Как?

#html #css #вёрстка #bootstrap #адаптивная_верстка

Использую Bootstrtap 4. div-у с классом h100percent необходимо занять всю оставшуюся
высоту в div-е wrapper. При этом Header фиксированной высоты располагается сверху,
а footer фиксированной высоты снизу. Высота блока 100% т.е. разная от монитора к монитору.

P.S. В div .h100percent будет другой див размером больше него самого, т.е. должна
быть полоса прокрутки overflow: auto. h100percent должен занять оставшееся место по
высоте от футера и хэдера.
P.P.S "Как всегда прижимать footer к низу экрана?" не решает моей проблемы, там блок
контента не занимает все оставшуюся высоту.



div {
  padding: 10px;
}

.wrapper {
  position: fixed;
  width: 300px;
  height: 100%;
}

.h100percent {
  /* Занять все оставшееся место */
}



  
  
  

  
  
  
  
  

  




  

    

      


        
Header

        
Этот
блок должен занять всю оставшуюся высоту

        
Foter
      
    
  







    

Ответы

Ответ 1

Для такой задачи подходит flex-box. Нужно разместить блоки в контейнере flex 100%-высоты,
а в блок, который нужно растянуть, добавить правило  flex-grow 



.flex {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

body {
  margin: 0;
  padding: 0
}

.header {
  background: green
}

.h100 {
  background: yellow;
  flex-grow: 3
}

.footer {
  background: red
}

  
Верхний блок
  
Контент
  
Нижний блок



Ответ 2

Если header и footer фиксированной высоты, допустим по 70px, можно сделать так:

.h100percent {
  height: calc(100vh - 140px);
}


Тогда ваш .h100percent получит высоту, равную высоте окна браузера и вычтет высоту
хедер+футер