прокрутить div с неопределенной высотой

Question

У меня есть ситуация, когда у меня есть желание прокрутить основной контент div, но не заголовок. Мой заголовок имеет фиксированную высоту, а содержимое div предназначено для растягивания остальной части вертикального пространства, с полосой прокрутки, если содержимое простирается за нижнюю часть страницы. Обычно я бы использовал абсолютное позиционирование в содержимом div (top:height-of-header, bottom:0, left:0, right:0) и установил overflow-x в auto. Однако это осложняется тем фактом, что у меня есть дополнительный div между заголовком и контентом, который имеет гибкую высоту, основанную на его содержимом, и только иногда появляется (у меня есть кнопка, которая переключает видимость этого div). Таким образом, я не могу использовать абсолютное позиционирование для контента div, потому что максимальное расстояние варьируется. Я также не могу использовать процентные высоты, потому что я хочу, чтобы части без прокрутки были правильной высотой для их содержимого, а не на основе процента страницы.

Вот упрощенная версия установки:

<div id="header"></div>  <--- Fixed height 
<div id="adddiv"></div>  <--- Not always visible. Flexible height. 
<div id="content"></div> <--- The only one I want scrolling 

Edit: Добавлено jsfiddle с большим примером здесь: https://jsfiddle.net/r7b30v2f/4/ (без скроллинга работает так, как я хочу)

Поскольку я m уже использует javascript для обработки переключения «среднего» div, я всегда могу использовать javascript для изменения верхнего значения для div содержимого в зависимости от того, отображается ли средний div. Но я предпочел бы решение css, если оно есть.

Answer 1

Он будет размещать полосу прокрутки в содержимом div, если задано содержание div height или max-height. CSS Пример:

#contents { 
    max-height: 250px; 
    width: 100%; 
    overflow-y: auto; 
} 

EDIT: Вы можете попробовать установить высоту, выясняя высоту заголовка + высота adddiv.

var headerHeight = document.getElementById("header").offsetHeight; 
var adddivHeight = document.getElementById("adddiv").offsetHeight; 
var heightUsed = headerHeight + adddivHeight; 
var totalHeight = screen.height; 
var height = totalHeight - heightUsed; 

(я попробовать что-то вроде этого, но я не мог заставить его работать, я просто подумал, что я разделю то, что я думаю, что может быть решением.)