CSS: выкладка фиксированного заголовка с прокруткой боковой панели

Question

Я пытаюсь смоделировать базовую структуру моей страницы после this site - то есть, в частности, используя фиксированный заголовок/навигационную панель с боковой панелью с прокруткой и панель содержимого который прокручивается нормально. Похоже, сайт, на который я ссылаюсь, использует функции flexbox, но мне нужно будет настроить несколько старых браузеров (по крайней мере, IE8 и выше), поэтому я надеюсь реализовать этот макет с помощью чистого CSS или с помощью jQuery.

У меня есть fiddle set up here, который показывает основную структуру, на основе двух основных оберток следующим образом:

.wrapper { 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 
.body-wrapper { 
    margin-top: 80px; 
    width: 100%; 
    height: 100%; 
} 

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

Большое спасибо за любую помощь здесь; Я открыт для корректировки моей версии или совершенно другого подхода.

Answer 1

Один из способов сделать это, не изменяя существующий подход слишком много, заключается в использовании position:fixed с боковой панелью. Вы можете добавить эти стили к вашему CSS:

div#mainBody { 
    padding-left:220px; /* This is how wide #list is */ 
} 
aside#list{ 
    position:fixed; 
} 

Обратите внимание, что я изменил свой идентификатор для основного содержимого контейнера #mainBody, так как у вас уже есть #main на вашей странице, используемое с заголовком. (Идентификатор должен быть уникальным.) Вот вам JSFiddle.

Надеюсь, это поможет! Дайте знать, если у вас появятся вопросы.

EDIT: Причина содержание в нижней части боковой панели отрезана потому, что у вас есть следующий стиль:

aside#list { 
    height:100%; 
} 

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

aside#list { 
    bottom:0; 
    top:80px; /* Height of the header */ 
} 

Это гарантирует, что боковая панель начинается прямо под заголовком, и заканчивается прямо в нижней части окна просмотра. Таким образом, прокрутка к нижней части боковой панели покажет весь контент. Вот для этого updated JSFiddle.