Сделать дочерний элемент прокручиваемым и заполнить родительскую высоту

Question

В веб-приложении web.telegram.com Большинство элементов фиксировано, за исключением списка контактов и области чата (он прокручивается и заполняет его родительский элемент).

Теперь я хочу, чтобы добиться такого поведения с Bootstrap. Мое приложение имеет фиксированную навигационную панель и фиксированный контейнер, который будет содержать все приложение. Приложение имеет несколько вкладок. Поэтому я установил кнопки вкладок в верхнюю часть этого фиксированного контейнера. Наконец, есть элемент, который будет удерживать вкладки.

Вы можете проверить его здесь: http://www.bootply.com/3bO0UL9OHi

Однако некоторые вкладки содержат панель, с header и footer. Я хочу сделать их прикрепленными к верхней и нижней части контейнера табуляции и сделать panel-body: заполнить оставшуюся область и прокрутить. Также как область чата в приведенном выше снимке телеграммы.

Как это можно сделать? (используя bootstrap, css или jquery).

Answer 1

Я нашел обходное решение, используя jQuery. Это не лучшее решение, но оно работает как минимум.

$(window).resize(function() { 
    $('#text-panel').parents().css('height', '100%'); 
    $('#text-panel').parents().css('overflow-y', 'hidden'); 
    // fix .fixed-container height. because it has `top: 70px;`. 
    $('.fixed-container').css('height', $('.fixed-container').parent().outerHeight() - 70); 
    // fix #main-tabs-panes height. because it should not have 100% of its parent. 
    // the right value is: parent height - tabs-header height. 
    $('#main-tabs-panes').css('height', $('#main-tabs-panes').parent().outerHeight() - $('#tabs-header').outerHeight()); 
    // now we set the height of our element. 
    // it should be: parent height - panel header - panel footer - 20px. 
    // because the panel has `margin-bottom: 20px` 
    $('#text-panel').css('height', $('#text-panel').parent().outerHeight(true) - (20 + $('#text-panel').prev().outerHeight(true) + $('#text-panel').next().outerHeight(true))); 
    $('#text-panel').css('overflow-y', 'auto'); 
}); 
$(window).resize(); 

Так что в целом выполните следующие действия: высоту до '

1. набор всех родителей 100%'.
2. Исправить любого родителя с одним из них: (top, bottom, margin-top или margin-bottom). Вычтите их значение.
3. Скрыть все overflow-y.
4. Установите высоту своего элемента. В моем случае это должно быть: (родительская высота MINUS всех других братьев и сестер).
5. overflow-y: auto.

Here is an updated version (bootply)