Как ограничить элемент фиксированной позиции до высоты окна браузера?

Question

У меня есть страница с боковой панелью с фиксированной позицией. Я бы хотел, чтобы боковая панель была прокручиваема в том случае, если ее содержимое слишком велико, чтобы соответствовать окну браузера.

Однако, когда я создаю боковую панель с overflow-y: scroll, отображается полоса прокрутки, но она отключена, потому что боковая панель достаточно высока, чтобы удерживать весь контент, даже если он слишком высок для окна браузера.

Есть ли способ ограничить высоту элемента фиксированной позиции таким образом, чтобы он прокручивался, когда контент расширен ниже нижней части окна браузера?

Решение для jQuery приемлемо для моего приложения. Обратите внимание, что боковая панель не распространяется до самого верха окна.

http://jsfiddle.net/nA8z4/

http://jsbin.com/iqibew/2: Эта версия показывает заголовок, который на боковой панели должен появиться ниже.

Answer 1

Вам необходимо установить высоту боковой панели. Прямо сейчас ваша боковая панель выше вашего текстового блока и работает под видовым окном (но вы не можете этого увидеть). Если вы установите его высоту на 100% (или что-то еще), на боковой панели будет отображаться полоса прокрутки, если все ее содержимое невозможно отобразить сразу.

Так что вам нужно изменить:

div#fixed-div { 
    position: fixed; 
    left: 0; 
    top 80px; 
    width: 260px; 
    background-color: silver; 
    overflow-y: scroll; 
} 

Для этого:

div#fixed-div { 
    position: fixed; 
    left: 0; 
    top 80px; 
    width: 260px; 
    background-color: silver; 
    overflow-y: scroll; 
    height: 100%; 
} 

Edit:

Если вы хотите, решение с максимальной поддержкой браузера (даже в старых браузерах) , вам понадобится JavaScript. Вот решение, которое зависит от JQuery:

CSS:

* { 
    margin: 0; 
    padding: 0; 
} 

html, body { 
    height: 100%; 
} 

div#header-div { 
    height: 90px; 
    background-color: lime; 
} 
div#fixed-div { 
    position: fixed; 
    width: 260px; 
    background-color: silver; 
    overflow-y: scroll; 
} 

JavaScript:

var bodyHeight = $('body').height(); 
var headerHeight = $('#header-div').height(); 
var sidebarHeight = bodyHeight - headerHeight; 

$('#fixed-div').height(sidebarHeight); 

Рабочая JSFiddle: http://jsfiddle.net/nH7xR/