Jak poprawnie zaimplementować stały pasek boczny?

Question

Próbuję wykonać ten projekt: Gdzie pasek boczny zostanie naprawiony, ale prawa strona (główna zawartość) będzie przewijana w pionie (i potencjalnie poziomo, jeśli okno przeglądarki użytkownika jest mniejsze). Jaki jest najlepszy sposób, aby to osiągnąć?

Próbowałem, aby pasek boczny był "stały" o stałej szerokości 200 pikseli, a następnie główna zawartość ma po lewej stronie margines o wartości 200 pikseli. Jeśli jednak przeglądarka użytkownika jest mniejsza niż główna treść, pasek boczny nakłada się na całą zawartość, gdy użytkownik próbuje przewinąć w poziomie.

Czy istnieje mądrzejszy sposób, aby to osiągnąć? Dzięki!

Answer 1

Użyj elementu div jako kontenera dla strony.

.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> 

Treści będą musiały być pojemnik umieścić stronę w. Tutejsze wartości są moje testy aby sprawdzić, czy mam rację w tej sprawie. Jeśli szerokość i wysokość przekracza wartości ustawione dla zawartości, pojawią się paski przewijania.

Mają skrzypce: http://jsfiddle.net/djwave28/JZ52u/

---

EDIT: czuły pasek boczny

Aby mieć stały reagujący paska bocznego, po prostu dodaj do media-maila.

Przykład:

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

Oto kolejny skrzypce: http://jsfiddle.net/djwave28/JZ52u/363/

Answer 2

Oto alternatywa: 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; 
}