высота не работает в приложении чата

Question

Я хотел бы установить стили css для элементов, как указано в элементах. Все высоты должны быть в процентах, потому что я хотел бы разработать отзывчивое приложение. Пожалуйста, измените размер окна плункера, чтобы понять, что я хотел бы достичь.

Самой большая проблема для установки высоты 100% для контейнеров-жидкости (см линии 34 в index.html)

Plunkr Link

<div class="container-fluid"> 
    <div class="row"> 
     <div ui-view="rooms" class="col-md-3"></div> 
     <div ui-view="chat" class="col-md-9"></div> 
    </div> 
</div> 

Plunker ссылка имеет целое приложение

Answer 1

Если у вас есть фиксированный верхний и нижний колонтитулы высоты можно использовать, например, для расчета CSS:

.container-fluid{ 
    height:calc(100vh - 120px); 
} 

120px рассчитывается, если заголовок и нижние колонтитулы были оба 60px каждый высоты

Answer 2

Пожалуйста, проверьте ниже код

.container-fluid { 
    display: inline-block; 
    height: calc(100vh - 350px); 
    width: 100%; 
} 
.container-fluid .row { height: 100%; } 
.container-fluid .row .col-md-9 { 
    height: 100%; 
} 
.container-fluid .row .col-md-9 textarea.form-control { 
    height: 100%; 
}