css - siga - en que parte de la estructura de html puedo ubicar el div

Desplazar parte del contenido en el contenedor de posición fija

Question

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

He echado un vistazo a esta respuesta , sin embargo, la solución presentada allí no funciona con la position: fixed o position: absolute contenedores position: absolute , lo que es un dolor.

He hecho una demostración JSFiddle de mi problema here . Lo ideal es que la gran cantidad de texto se desplace, en lugar de desbordarse hacia la parte inferior de la página. La altura del encabezado puede variar con el contenido y puede estar animada.

body {
    background: #eee;
    font-family: sans-serif;
}

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;
}

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

    <div id="scrollable">
        Scrolling content<br><br>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>

Sin un encabezado fijo, simplemente puedo agregar overflow-y: scroll to div.sidebar y con div.sidebar puedo desplazar todo su contenido si se desborda la parte inferior del contenedor. Sin embargo, tengo problemas al tener un encabezado de altura variable fijo en la parte superior de la barra lateral y tener contenido debajo de ese rollo si es demasiado largo para que quepa en el contenedor.

div.sidebar debe permanecer en position: fixed , y me gustaría mucho hacer esto sin ningún tipo de pirateo, así como hacerlo lo más cruzado posible con el navegador. He intentado varias cosas, pero ninguna de ellas funciona, y no estoy seguro de qué intentar desde aquí.

¿Cómo puedo hacer un div dentro de una position: fixed contenedor position: fixed desplaza solo en la dirección Y cuando el contenido desborda el div que lo 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

Cambié div divisible para estar en 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 con dos divs desplazables

Answer 2

Configure la división desplazable para que tenga un max-size y agregue overflow-y: scroll; a sus propiedades.

Edición: intentando que el jsfiddle funcione, pero no se desplaza correctamente. Esto tomará algún tiempo para averiguar.

Answer 3

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

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

Answer 4

Lo que funcionó para mí:

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

Answer 5

Parece que funciona si lo usas.

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

y agregue padding-bottom: 60px a div.sidebar .

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

Sin embargo, no estoy seguro de por qué debe ser 60px .

Además, te perdiste la f de overflow-y: scroll;