Div con barra de desplazamiento dentro de div con la posición: fijo

Tengo un div con la 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 se muestra el código y una captura de pantalla para aclarar:Div con barra de desplazamiento dentro de div con la posición: fijo

<!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>

alt text

¿Hay alguna forma para mí de hacer 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 movía #textremogido en algún lugar, el elemento interno ven con eso

EDIT: Sé que puedo configurar overflow: auto en #outerfixed y obtener una barra de desplazamiento en todo, pero específicamente quiero una barra de desplazamiento solo en # innerstatic2, es una grilla y quiero desplazarme solo por la grilla .

¿Alguien? ¿Posible?

Fuente

2010-10-01 Einar Egilsson

Es el contenedor div que tiene que estar con el atributo overflow: auto. En este caso, el div #outerfixed

Fuente

2010-10-01 07:00:08

Lo siento, debería haber sido más claro. Quiero explícitamente que la barra de desplazamiento solo esté en el elemento # innerstatic2. Es una cuadrícula y quiero desplazar solo la cuadrícula, no todo el contenedor. –

Hay una solución de dos pasos para esto, pero se trata de algo así como un costo:

overflow-y: scroll; Añadir a la CSS para #innerstatic2.
definen un height (o max-height) para #innerstatic2, de lo contrario no será desbordamiento, sólo va a seguir aumentando su altura (el valor por defecto para una div es height: auto).

Editado porque simplemente no puedo parar, a veces.

He publicado una demostración en jsbin para mostrar una implementación jQuery de esto, que calculará un height para usted (no se generaliza, 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(); 
    } 
);

Fuente

2010-10-01 07:01:14

Gracias por la respuesta. En realidad, esto es más o menos lo que tenemos hoy, calcula la altura correcta para # innerstatic2 y establece con jquery. Pero esto está causando problemas con un componente de terceros que calcula algunos tamaños incorrectamente cuando nos metimos con esto en el documento listo, por eso es que realmente quería una solución de CSS puro. –

Entonces, ¿no hay forma de forzar el desplazamiento en # innerstatic2 estableciendo la altura en #extremo? Por lo que he probado, parece que no, # innerstatic2 solo fluye afuera si establezco una altura explícita en #outerfixed, pero ¿eso es porque es position: fixed? –

Podría ser. También puede agregar 'overflow: hidden' al css para' # outerfixed', pero eso no se ve * particularmente bonito, desafortunadamente. –

La única forma de figura, es fijar innerstatic2 a la posición absoluta (para que pueda utilizar la parte superior e inferior al tamaño en relación con outerfixed), a continuación, dentro de innerstatic2 crear otro div donde usted pone su texto. Luego le da innerstatic2 el "desbordamiento: 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 son compatibles con las nuevas características de CSS3, como el soporte de cálculo, habrá mejores opciones para hacer esto, sin estos inconvenientes.

Fuente

2010-10-01 15:41:14

No es ideal, pero esto debe conseguir que el 90% de ellos manera

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

Fuente

2011-01-20 19:39:35 SooDesuNe

que deben establecer la altura de outerfixed y max-height para innerstatic2

ver esto podría ser útil DEMO

Fuente

2012-09-24 06:29:06 Afshin

overflow-y:scroll;

Y agréguenlo 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;

Fuente

2014-05-14 17:46:47 Dyrehauge

I resuelto dando posición absoluta a la ul y la altura 100%

ul { 
    overflow-y: scroll; 
    position: absolute; 
    height: 100%; 
}

check out this FIDDLE

Fuente

2014-08-06 07:50:26

Esta solución oculta el extremo inferior del 'ul' (no muestra la última instancia' li') – sjbuysse

gracias, me salvó la vida :) –

Div con barra de desplazamiento dentro de div con la posición: fijo

Respuesta

Cuestiones relacionadas