У меня есть фиксированная боковая панель слева от моего сайта с содержимым, на котором слишком много контента для отображения на экране. Как я могу сделать этот контент прокручиваемым, сохраняя при этом возможность прокручивать правую сторону?
Я бы подумал, что достаточно простого overflow-y: scroll;. Похоже, мне нужно иметь максимальную высоту на боковой панели, но установив, что максимальная высота до 100% ничего не делает. Я уверен, что это простой шаблон кода, но, увы, мои навыки CSS оставили меня сегодня.
Простой пример: http://jsfiddle.net/tvysB/1/
Установите top и bottom в 0, чтобы боковая панель была точно такой же высоты, как и область просмотра:
#leftCol {
position: fixed;
width: 150px;
overflow-y: scroll;
top: 0;
bottom: 0;
}
Здесь ваша скрипка: http://jsfiddle.net/tvysB/2/
У меня была такая же проблема и исправлена с помощью:
.WhateverYourNavIs {
max-height: calc(100vh - 9rem);
overflow-y: auto;
}
Это устанавливает максимальную высоту для вашего навигатора таким образом, который реагирует на высоту браузера пользователей, а затем дает ему прокрутку, когда это необходимо.