Affichage de la barre de défilement verticale Div

87

Je me demande comment il est possible d'afficher en permanence la barre verticale d'un div (grisé s'il n'y a pas de défilement) similaire à nos barres régulières. Fondamentalement, j'essaie de placer un site Web entier dans un div (comme gmail / facebook), donc si la page n'est pas assez longue, toute la page se déplace en raison de l'absence de barre de défilement verticale.

J'ai besoin d'une solution à ce problème. J'ai essayé overflow-y: scroll. Mais cela ne semble pas du tout fonctionner.

html css

— Alec Smart
source

182

Dans quel navigateur testez-vous?

Quel DOCType avez-vous défini?

Comment déclarez-vous exactement votre CSS?

Êtes-vous sûr de ne pas avoir manqué un ;avant / après le overflow-y: scroll?

Je viens de tester ce qui suit dans IE7 et Firefox et cela fonctionne 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>

Développer l'extrait

— Eoin Campbell
source

Également testé dans IE7 et FireFox, et seulement <div style = "overflow-y: scrol"> Hello </div> fonctionne.

— Staale

1

voici la feuille de style que j'utilise: #main_container {width: 100%; couleur de fond: #eeeeee; overflow-y: défilement; hauteur: 100%; position: absolue; }

— Alec Smart

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

— Alec Smart

oh ça marche maintenant ... merci .. j'ai par hasard placé une balise de style disant overflow: auto dans le div, qui a écrasé mon css externe ...

— Alec Smart

30

Avez-vous essayé overflow-y:auto? Ce n'est pas exactement ce que vous voulez, car la barre de défilement n'apparaîtra qu'en cas de besoin.

— kgiannakakis
source

29

Toujours: si vous voulez toujours une barre de défilement verticale, utilisezoverflow-y: scroll;

jsFiddle:

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

Si nécessaire : si vous ne voulez qu'une barre de défilement verticale lorsque cela est nécessaire, utilisez overflow-y: auto;(Vous devez spécifier une hauteur dans ce cas)

jsFiddle:

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

— Razan Paul
source