Tengo el siguiente código HTML: http://jsfiddle.net/fMs67/. Me gustaría hacer que div2 respete el tamaño de div1 y recorra los contenidos de div3.div deslizable dentro del contenedor
¿Esto es posible?
Gracias!
ACTUALIZACIÓN-1:
Este es el caso más avanzado que he simplificado en exceso cuando hice la pregunta: http://jsfiddle.net/Wcgvt/. Necesito de alguna manera que header + es sibling div para no desbordar el tamaño del div principal.
Agregando position: relative al padre, y un max-height:100%; en div2 funciona.
<div id="div1" style="height: 500px;position:relative;">
<div id="div2" style="max-height:100%;overflow:auto;border:1px solid red;">
<div id="div3" style="height:1500px;border:5px solid yellow;">hello</div>
</div>
</div>
</body>
Actualización: A continuación se muestra el ejemplo de "actualización" y respuesta. http://jsfiddle.net/Wcgvt/181/
El secreto está en usar box-sizing: border-box, y algo de relleno para hacer que la segunda altura div sea 100%, pero mueva su contenido a 50px. A continuación, ajuste el contenido en un div con overflow: auto para contener la barra de desplazamiento. Preste atención a los índices z para mantener todo el texto seleccionable; espero que esto ayude, varios años después.
Si coloca overflow: scroll en una altura fija div, el div se desplazará si el contenido ocupa demasiado espacio.
¿Esto es lo que buscas?
<body>
<div id="div1" style="height: 500px;">
<div id="div2" style="height: inherit; overflow: auto; border:1px solid red;">
<div id="div3" style="height:1500px;border:5px solid yellow;">hello</div>
</div>
</div>
En lugar de overflow:auto, tratar overflow-y:auto. Debe funcionar como un encanto!
acabo de agregar (overflow: scroll;) en (div3) con altura fija.
ver el violín: - http://jsfiddle.net/fMs67/10/
function start() {
\t document.getElementById("textBox1").scrollTop +=5;
scrolldelay = setTimeout(function() {start();}, 40);
}
function stop(){
\t clearTimeout(scrolldelay);
}
function reset(){
\t var loc = document.getElementById("textBox1").scrollTop;
\t document.getElementById("textBox1").scrollTop -= loc;
\t clearTimeout(scrolldelay);
}
//adjust height of paragraph in css
//element textbox in div
//adjust speed at scrolltop and startcreé una versión mejorada, basada en el violín de Trey Copland, que creo que es más parecido a lo que quería. Agregado aquí para futura referencia a aquellos que vienen aquí más tarde. Fiddle example
<body>
<style>
.modal {
height: 390px;
border: 5px solid green;
}
.heading {
padding: 10px;
}
.content {
height: 300px;
overflow:auto;
border: 5px solid red;
}
.scrollable {
height: 1200px;
border: 5px solid yellow;
}
.footer {
height: 2em;
padding: .5em;
}
</style>
<div class="modal">
<div class="heading">
<h4>Heading</h4>
</div>
<div class="content">
<div class="scrollable" >hello</div>
</div>
<div class="footer">
Footer
</div>
</div>
</body>
ha conseguido este fijo? –
Hola TCC: ¡gracias por preguntar! En realidad, mi caso era un poco más complejo que eso: agregué UPDATE-1 con un nuevo violín. –
Lo que intenta hacer es muy difícil sin especificar alturas difíciles, es decir, establezca d3-2 a la altura máxima de la altura de d3 menos la altura de d3-1. –