Mostra barra di scorrimento verticale div

87

Mi chiedo come sia possibile mostrare permanentemente la barra verticale di un div (in grigio se non c'è scorrimento) simile alle nostre barre normali. Fondamentalmente sto cercando di posizionare un intero sito Web in un div (come gmail / facebook), quindi se la pagina non è abbastanza lunga l'intera pagina si sposta a causa della mancanza della barra di scorrimento verticale.

Ho bisogno di una soluzione a questo problema. Ho provato overflow-y: scroll. Ma non sembra funzionare affatto.

html css

— Alec Smart
fonte

182

In quale browser stai testando?

Quale DOCType hai impostato?

Come stai dichiarando esattamente il tuo CSS?

Sei sicuro di non aver perso un ;prima / dopo il overflow-y: scroll?

Ho appena testato quanto segue in IE7 e Firefox e funziona bene

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

Espandi lo snippet

— Eoin Campbell
fonte

Testato anche in IE7 e FireFox, e funziona solo <div style = "overflow-y: scrol"> Hello </div>.

— Staale

1

questo è il foglio di stile che sto usando: #main_container {width: 100%; colore di sfondo: #eeeeee; overflow-y: scorrimento; altezza: 100%; posizione: assoluta; }

— Alec Smart

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

— Alec Smart

oh, ora funziona ... grazie .. per caso ho inserito un tag di stile che dice overflow: auto nel div, che ha sovrascritto il mio css esterno ...

— Alec Smart

30

Hai provato overflow-y:auto? Non è esattamente quello che vuoi, poiché la barra di scorrimento apparirà solo quando necessario.

— kgiannakakis
fonte

29

Sempre: se vuoi sempre la barra di scorrimento verticale, usaoverflow-y: scroll;

jsFiddle:

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

Quando necessario : se si desidera solo la barra di scorrimento verticale quando necessario, utilizzare overflow-y: auto;(è necessario specificare un'altezza in questo caso)

jsFiddle:

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

— Razan Paul
fonte