css - hijo desplazable del elemento fijo

Question

Tengo un div fijo con una altura del 100%, y dentro de eso, un div infantil que está relativamente posicionado. El elemento div infantil contiene texto que se puede cambiar, por lo que no tiene una altura fija.

Quiero que el elemento div se desplace verticalmente si su contenido se desborda fuera de la pantalla. Jugué con las propiedades de altura mínima y máxima para lograr esto, pero no es una solución ideal, y no siempre funciona.

EDITAR: la altura mínima y máxima parece ser ignorada, casi. Calculé la cantidad de área vertical que tomaría el cuadro de texto para la altura mínima de la pantalla "permitida", y lo configuré como la altura. Agregar la altura mínima y máxima no hizo ninguna diferencia en esto. El único problema con esta solución es que la caja es siempre alrededor de ~ 60%, por lo que incluso cuando no es necesario desplazarse, lo hace. Esto funciona, pero no es ideal. Si hay una forma de evitar esto, sería genial.

Esto es lo que tengo hasta ahora:

<div class="content"> 
    <div id="textbox"> some text 
    </div> 
</div> 

.content { position: fixed; height: 100%; top: 0px; right: 0px; } 

#textBox { 
    position: relative; 
    top: 165px; 
    height: 61.5%; 
    overflow-y: auto; 
} 

¿Hay una forma más mejor, a prueba de tontos para hacer esto?

Answer 1

Básicamente Tienes que configurar el desbordamiento de tu elemento fijo como puedes ver en this example, y hay un jsfiddle para jugar con las posibilidades.

Answer 2

El siguiente funcionó a la perfección para mí: el contenido

<style type="text/css"> 
    #fixed { 
     position: fixed; 
     top:  0; 
     bottom:  0; 
     left:  0; 
     right:  0; 
     border:  1px solid black; 
     overflow: hidden; 
     background: white; 
    } 

    #scrolling { 
     overflow: auto; 
     max-height: 98%; 
    } 
</style> 

<div id="fixed"> 
    <div contenteditable id="scrolling"> 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
     Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam 
     egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien 
     ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean 
     fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non 
     enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas 
     augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, 
     facilisis luctus, metus</p> 
    </div> 
</div> 

del div es editable, por lo que sólo tiene que añadir el texto hasta que se desplaza. Funcionaría en un navegador decente.

Live Example