Desplazar parte del contenido en contenedor de posición fija

Question

Tengo un div position: fixed en un diseño, como una barra lateral. Me han pedido que tenga parte de su contenido fijo en la parte superior (internamente), y el resto para desplazarse a si se desborda la parte inferior de la div.

He echado un vistazo a this answer, sin embargo, la solución presentada allí no funciona con los contenedores position: fixed o position: absolute, lo cual es un problema.

He hecho una demostración JSFiddle de mi problema here. La gran cantidad de texto idealmente debería desplazarse, en lugar de desbordarse en la parte inferior de la página. La altura del encabezado puede variar con el contenido y puede ser animada.

jsFiddle código de ejemplo:

CSS:

div.sidebar { 
    padding: 10px; 
    border: 1px solid #ccc; 
    background: #fff; 
    position: fixed; 
    top: 10px; 
    left: 10px; 
    bottom: 10px; 
    width: 280px; 
} 

div#fixed { 
    background: #76a7dc; 
    padding-bottom: 10px; 
    color: #fff; 
} 

div#scrollable { 
    overlow-y: scroll; 
} 

HTML:

<div class="sidebar"> 
    <div id="fixed"> 
     Fixed content here, can be of varying height using jQuery $.animate()   
    </div> 

    <div id="scrollable"> 
     Potentially long content 
    </div> 
</div>​ 

Sin una cabecera fija, puedo agregar simplemente overflow-y: scroll a div.sidebar y puedo desplazarse felizmente todo su contenido si se desborda el fondo del contenedor. Sin embargo, estoy teniendo problemas con tener un encabezado de altura variable y fijo en la parte superior de la barra lateral, y tener cualquier contenido debajo de ese desplazamiento si es demasiado largo para caber en el contenedor.

div.sidebar obligada estancia position: fixed, y me gustaría mucho hacer esto sin ningún tipo de hacks, así como que sea lo más navegadores como sea posible. Intenté varias cosas, pero ninguna de ellas funciona, y no estoy seguro de qué probar aquí.

¿Cómo puedo hacer que un div dentro de un contenedor position: fixed se desplace solo en la dirección Y cuando su contenido sobrepasa el div que contiene, con un encabezado fijo de altura variable e indeterminada? Me gustaría mucho alejarme de JS, pero si tengo que usarlo, lo haré.

Answer 1

parece que funciona si se utiliza

div#scrollable { 
    overflow-y: scroll; 
    height: 100%; 
} 

y añadir a padding-bottom: 60pxdiv.sidebar.

Por ejemplo: http://jsfiddle.net/AKL35/6/

Sin embargo, estoy seguro de por qué tiene que ser 60px.

Además, se ha perdido la f de overflow-y: scroll;

Answer 2

Establezca el div desplazable para tener un max-size y agregue overflow-y: scroll; a sus propiedades.

Editar: tratando de hacer funcionar el jsfiddle, pero no se está desplazando correctamente. Esto tomará un tiempo para averiguarlo.

Answer 3

he cambiado div desplazable para estar con posición absoluta, y todo funciona para mí

div.sidebar { 
    overflow: hidden; 
    background-color: green; 
    padding: 5px; 
    position: fixed; 
    right: 20px; 
    width: 40%; 
    top: 30px; 
    padding: 20px; 
    bottom: 30%; 
} 
div#fixed { 
    background: #76a7dc; 
    color: #fff; 
    height: 30px; 
} 

div#scrollable { 
    overflow-y: scroll; 
    background: lightblue; 

    position: absolute; 
    top:55px; 
    left:20px; 
    right:20px; 
    bottom:10px; 
} 

DEMO with two scrollable divs

Answer 4

En realidad esta es una mejor manera de hacerlo ese. Si se utiliza height: 100%, el contenido se sale de la frontera, pero cuando es 95% todo está en orden:

div#scrollable { 
    overflow-y: scroll; 
    height: 95%; 
}