Прокрутка встроенной боковой панели

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

Я бы подумал, что достаточно простого overflow-y: scroll;. Похоже, мне нужно иметь максимальную высоту на боковой панели, но установив, что максимальная высота до 100% ничего не делает. Я уверен, что это простой шаблон кода, но, увы, мои навыки CSS оставили меня сегодня.

Простой пример: http://jsfiddle.net/tvysB/1/

Ответ 1

Установите top и bottom в 0, чтобы боковая панель была точно такой же высоты, как и область просмотра:

#leftCol {
    position: fixed;
    width: 150px;
    overflow-y: scroll;
    top: 0;
    bottom: 0;
}

Здесь ваша скрипка: http://jsfiddle.net/tvysB/2/

Ответ 2

У меня была такая же проблема и исправлена с помощью:

.WhateverYourNavIs {
      max-height: calc(100vh - 9rem);
      overflow-y: auto;
 }

Это устанавливает максимальную высоту для вашего навигатора таким образом, который реагирует на высоту браузера пользователей, а затем дает ему прокрутку, когда это необходимо.