css - siga - Div con barra de desplazamiento dentro de div con posición: fijo
poner div fijo con scroll (7)
Tengo un div con posición: fijo que es mi contenedor div para algunos menús. Lo configuré en la parte superior: 0px, abajo: 0px para llenar siempre la ventana gráfica. Dentro de ese div quiero tener otros 2 divs, el inferior que contiene muchas líneas y tiene desbordamiento: automático. Esperaría que estuviera contenido dentro del contenedor div, pero si hay demasiadas líneas simplemente se expande fuera del div fijo. A continuación está mi código y una captura de pantalla para aclarar:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MyPlan</title>
<meta name="X-UA-COMPATIBLE" value="IE=8" />
<style type="text/css">
#outerfixed { position:fixed; width:200px; background-color:blue; padding:5px; top:0px; bottom:30px;}
#innerstatic1 { width:100%; background-color:yellow; height:100px;}
#innerstatic2 { overflow:auto; background-color:red; width:100%;}
</style>
</head>
<body>
<div id="outerfixed">
<h3>OUTERFIXED</h3>
<div id="innerstatic1">
<h3>INNERSTATIC1</h3>
</div>
<div id="innerstatic2">
<h3>INNERSTATIC2</h3>
line<br />
...lots of lines
line<br />
</div>
</div>
</body>
</html>
¿Hay alguna forma de que haga esto? Una vez más, quiero que # innerstatic2 esté correctamente contenido dentro de #outerfixed y obtener barras de desplazamiento si se vuelve más grande que el espacio que tiene dentro #outerfixed.
Sé que hay algunas posibilidades de hackear esto al arreglar también # innerstatic2, pero realmente me gustaría que estuviera dentro del flujo dentro de #fureza si es posible, de modo que si me muevo #extremadamente en algún lugar, el elemento interno vendría con eso.
EDITAR: Sé que puedo configurar overflow: auto en #outerfixed y obtener una barra de desplazamiento en todo, pero específicamente quiero una barra de desplazamiento justo en # innerstatic2, es una grilla y quiero desplazarme solo por la grilla.
¿Nadie? ¿Posible?
Es el contenedor div el que tiene que estar con el atributo overflow: auto. En este caso, el div #outerfixed
Hay una solución de dos pasos para esto, pero tiene un costo:
- Agregar
overflow-y: scroll;al CSS para#innerstatic2. - defina una
height(oheightmax-height) para#innerstatic2, de lo contrario no se desbordará, simplemente seguirá aumentando su altura (el valor predeterminado para undives laheight: auto).
He publicado una demostración en jsbin para mostrar una implementación jQuery de esto, que calculará una height para usted (no está generalizada, por lo que solo funcionará con su html actual).
(function($) {
$.fn.innerstaticHeight = function() {
var heightOfOuterfixed = $(''#outerfixed'').height(),
offset = $(''#innerstatic2'').offset(),
topOfInnerstatic2 = offset.top,
potentialHeight = heightOfOuterfixed - topOfInnerstatic2;
$(''#innerstatic2'').css(''height'',potentialHeight);
}
})(jQuery);
$(document).ready(
function() {
$(''#innerstatic2'').innerstaticHeight();
}
);
La única forma en que me imagino es establecer innerstatic2 en la posición absoluta (para que puedas usar top y bottom para ajustarlo en relación a outerfixed ), luego innerstatic2 crear otro div donde colocas tu texto. Luego le das a innerstatic2 el "overflow" : auto; " indicación. El inconveniente de este método, que innerstatic2 no se mueve hacia abajo, cuando innerstatic1 crece, ya que tiene que estar en posición absoluta. Si necesita moverse, debe ser "posición: relativa", pero luego debe establecer una altura fija para ello. De todos modos, debes conformarte con un compromiso.
Una vez que todos los navegadores sean compatibles con las funciones más nuevas de CSS3, como el soporte de cálculo, habrá mejores opciones para hacerlo, sin estos inconvenientes.
Lo resolví dando posición absoluta al ul y la altura 100%
ul {
overflow-y: scroll;
position: absolute;
height: 100%;
}
No es ideal, pero esto debería hacerte llegar el 90% de su camino
<div style="position:fixed; bottom:1px; left:5em; height: 20em; width:20em; background-color:blue;">
<div style ="width:15em; background-color: green;">
Title
</div>
<div style ="background-color:yellow; max-height:80%; width:15em; overflow:auto;">
<div style="height:100em; background-color:red; width:10em;">
scroll<br/>
scroll<br/>
scroll<br/>
</div>
</div>
</div>
debe establecer la altura para el maxifoxto y la altura máxima para el innerstatic2
ver esto podría ser útil DEMO
overflow-y:scroll;
Y agregue esto para dispositivos iOS. Da un mejor desplazamiento usando el tacto. ¡El overflow-y necesita ser scroll! por razones de seguridad. auto no funcionará para algunas personas. o al menos eso es lo que escuché.
-webkit-overflow-scrolling: touch;