Mostrar barra de desplazamiento vertical div

87

Me pregunto cómo es posible mostrar permanentemente la barra vertical de un div (atenuada si no hay desplazamiento) similar a nuestras barras regulares. Básicamente, estoy tratando de colocar un sitio web completo en un div (como gmail / facebook), por lo que si la página no es lo suficientemente larga, toda la página cambia debido a la falta de la barra de desplazamiento vertical.

Necesito una solución a este problema. Intenté overflow-y: scroll. Pero no parece funcionar en absoluto.

html css

— Alec inteligente
fuente

182

¿En qué navegador estás probando?

¿Qué DOCType ha configurado?

¿Cómo declaras exactamente tu CSS?

¿Estás seguro de que no te has perdido un ;antes / después del overflow-y: scroll?

Acabo de probar lo siguiente en IE7 y Firefox y funciona bien

<!-- Scroll bar present but disabled when less content -->
<div style="width: 200px; height: 100px; overflow-y: scroll;">
  test
</div>

<!-- Scroll bar present and enabled when more contents -->        
<div style="width: 200px; height: 100px; overflow-y: scroll;">
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
  test<br />
</div>

Expandir fragmento

— Eoin Campbell
fuente

También probado en IE7 y FireFox, y solo funciona <div style = "overflow-y: scrol"> Hola </div>.

— Staale

1

esta es la hoja de estilo que estoy usando: #main_container {ancho: 100%; color de fondo: #eeeeee; overflow-y: desplazamiento; altura: 100%; posición: absoluta; }

— Alec Smart

<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" " w3.org/TR/html4/loose.dtd ">

— Alec Smart

oh, está funcionando ahora ... gracias ... por casualidad coloqué una etiqueta de estilo que decía overflow: auto en el div, que sobrescribió mi css externo ...

— Alec Smart

30

¿Usted ha intentado overflow-y:auto? No es exactamente lo que desea, ya que la barra de desplazamiento aparecerá solo cuando sea necesario.

— kgiannakakis
fuente

29

Siempre: si siempre desea una barra de desplazamiento vertical, utiliceoverflow-y: scroll;

jsFiddle:

<div style="overflow-y: scroll;">
......
</div>

Cuando sea necesario : si solo desea una barra de desplazamiento vertical cuando sea necesario, utilice overflow-y: auto;(debe especificar una altura en este caso)

jsFiddle:

<div style="overflow-y: auto; height:150px; ">
....
</div>

— Razan Paul
fuente