css - bootstrap - ¿Cómo implementar correctamente la barra lateral fija?

sidebar jquery

Question

Estoy tratando de lograr este diseño: Donde se fijará la barra lateral, pero el lado derecho (el contenido principal) se desplazará verticalmente (y potencialmente horizontalmente si la ventana del navegador del usuario es más pequeña). ¿Cuál es la mejor manera de lograr esto?

Intenté que la barra lateral se "arreglara" con un ancho fijo de 200 px, y luego el contenido principal solo tiene un margen izquierdo de 200 px. Sin embargo, si el navegador del usuario es más pequeño que el contenido principal, la barra lateral se superpone a todo el contenido cuando el usuario intenta desplazarse horizontalmente.

¿Hay una manera más inteligente de lograr esto? ¡Gracias!

Answer 1

Aquí hay una alternativa: 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;
}

Answer 2

Usa el div contenido como tu contenedor para la página.

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

Tu contenido deberá ser el contenedor para colocar la página. Los valores aquí son mi prueba para ver si estoy en lo correcto. Si su ancho y alto exceden los valores que estableció para el contenido, aparecerán las barras de desplazamiento.

Tener un violín: http://jsfiddle.net/djwave28/JZ52u/

edición: barra lateral sensible

Para tener una barra lateral fija receptiva, simplemente agregue una consulta de medios.

Ejemplo:

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

Aquí hay otro violín: http://jsfiddle.net/djwave28/JZ52u/363/