Twitter bootstrap - Diseño fijo con barra lateral desplazable

Estoy tratando de implementar un encabezado simple + diseño de 2 columnas usando Twitter bootstrap.Twitter bootstrap - Diseño fijo con barra lateral desplazable

Tengo un encabezado fijo con un ancho del 100%, y ahora estoy tratando de tener dos columnas de altura completa de ancho fijo con barras de desplazamiento independientes. ¿Hay alguna buena manera de hacer esto con twitter bootstrap?

Aquí está una imagen de la distribución estoy tratando de construir Layout

Fuente

2012-04-03 Rand

El encabezado funciona bien (navbar-fixed-top) Para las columnas, utilizo un contenedor con una fila y dos span *. El contenedor y la fila tienen desbordamiento: oculto y alto: 100%, mientras que los tramos tienen desbordamiento: auto – Rand

sobre el diseño quiero decir. –

He editado mi comentario anterior, había presionado enter por accidente – Rand

he encontrado una manera de hacerlo. No estoy seguro de que es el mejor, pero no el truco: 'pre-desplazable' clase

<html> 

<head> 

    <link rel="stylesheet" media="screen" href="normalize.css"> 
    <link rel="stylesheet" media="screen" href="bootstrap.min.css"> 

    <style type="text/css"> 
      body, html { 
       height: 100%; 
       overflow: hidden; 
      } 

      .navbar-inner { 
       height: 40px; 
      } 

      .scrollable { 
       height: 100%; 
       overflow: auto; 
      } 

      .max-height { 
       height: 100%; 
      } 

      .no-overflow { 
       overflow: hidden; 
      } 

      .pad40-top { 
       padding-top: 40px; 
      } 
    </style> 
</head> 

<body> 

    <div class="navbar navbar-fixed-top"> 
     <div class="navbar-inner"> 
      <div class="container"> 
       header contents 
      </div> 
     </div> 
    </div> 

    <div class="container max-height no-overflow"> 
     <div class="row max-height"> 

      <div class="span8 scrollable"> 
       <div class="pad40-top"> 
        main contents 
       </div> 
      </div> 

      <div class="span4 scrollable"> 
       <div class="pad40-top"> 
        right sidebar contents 
       </div> 
      </div> 

     </div> 
    </div> 
</body>

http://jsfiddle.net/m4eS4/7/

Fuente

2012-04-04 14:51:50 Rand

hice un jsfiddle fuera de su código http://jsfiddle.net/m4eS4/3/ –

corregido http://jsfiddle.net/m4eS4/7/ –

@lenzai ¿Estás seguro de que el violín funciona como se esperaba? No veo la barra lateral derecha. Gracias. –

uso de rutina de carga en su div objetivo. Establezca div a una altura máxima fija. Es estéticamente bueno, también.

Fuente

2013-08-07 15:17:26

Utilicé esto con un "pozo" y creó el efecto que necesitaba perfectamente, parece ser lo que se estaba preguntando y es mucho más simple: esta debería ser la respuesta. – Watson

Sería bueno tener la referencia/enlace donde encontraste la clase pre-scrollable – GlennG

Twitter bootstrap - Diseño fijo con barra lateral desplazable

Respuesta

Cuestiones relacionadas