Полоса прокрутки без фиксированной высоты/Динамическая высота с полосой прокрутки ⇐ CSS

[Anonymous]

У меня есть такая структура HTML:

Код: Выделить всё

Dynamic height without scrollbar

Dynamic height with scrollbar

Fixed height without scrollbar

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

Я попробовал этот CSS:

Код: Выделить всё

#content{
border: red solid 1px;
overflow-y: auto;
}

А это:

Код: Выделить всё

#content{
border: red solid 1px;
overflow-y: auto;
height: 100%;
}

Но ни один из них не работает.

Я сделал пример в JSFiddle.

Могу ли я сделать это, используя только CSS и HTML? Я бы предпочел избегать Javascript.

Подробнее здесь: https://stackoverflow.com/questions/109 ... -scrollbar