Как правильно реализовать исправленную боковую панель?

Я пытаюсь выполнить этот проект: example design Если боковая панель будет фиксированной, но правая сторона (основное содержимое) будет прокручиваться по вертикали (и потенциально горизонтально, если окно браузера пользователя меньше). Каков наилучший способ достичь этого?

Я попытался сделать боковую панель "фиксированной" с фиксированной шириной 200 пикселей, а затем основное содержимое просто имеет левый край 200px. Однако, если пользовательский браузер меньше основного содержимого, боковая панель перекрывает все содержимое, когда пользователь пытается прокручивать его по горизонтали.

Есть ли более разумный способ достичь этого? Спасибо!

Ответы

Ответ 1

Используйте содержимое div в качестве контейнера для страницы.

 .sidebar {
     position: fixed;
     width: 200px;
     height: 400px;
     background: #000;
 }
 .content {
     margin-left: 200px;
     height: 500px;
     width: auto;
     position: relative;
     background: #f00;
     overflow: auto;
     z-index: 1;
 }
 .info {
     width: 1440px;
     height: 300px;
     position: relative;
     background: #f55;
 }

<div class="sidebar"></div>
<div class="content">
    <div class="info"></div>
</div>

Ваш контент должен быть контейнером для размещения страницы. Значения здесь - мой тест, чтобы проверить, правильно ли я в этом. Если ваша ширина и высота превышают значения, установленные для содержимого, появятся полосы прокрутки.

Есть скрипка: http://jsfiddle.net/djwave28/JZ52u/

изменить: отзывчивая боковая панель

Чтобы иметь отзывчивую фиксированную боковую панель, просто добавьте медиа-запрос.

Пример:

@media (min-width:600px) {
   .sidebar {
     width: 250px;
   }
   .content {
     margin-left: 250px;
   }
 }

Вот еще одна скрипка: http://jsfiddle.net/djwave28/JZ52u/363/

Ответ 2

Вот альтернатива: http://jsfiddle.net/BoyWonder/8mVQX/embedded/result/

body{
    padding-left:200px;
    margin:0;
}
div#sidebar{
   position:fixed;
   height:100%;
   width:200px; 
   top:0;
   left:0;
   background:grey; 
}
div#content{
    background:black;
    width:100%;
    height:1600px;
}