web-dev-qa-db-fra.com

HTML: Comment créer une DIV avec uniquement des barres de défilement verticales pour les longs paragraphes?

Je veux montrer les termes et conditions note sur mon site. Je ne veux pas utiliser de champ de texte et je ne veux pas non plus utiliser toute ma page. Je veux juste afficher mon texte dans la zone sélectionnée et utiliser uniquement la barre de défilement verticale pour lire et lire tout le texte.

Actuellement, j'utilise ce code:

<div style="width:10;height:10;overflow:scroll" >
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
 text text text text text text text text text
</div>

Deux problèmes:

  1. Il ne fixe pas la largeur et la hauteur et s'étend jusqu'à ce que tout le texte apparaisse.
  2. Deuxièmement, il affiche une barre de défilement horizontale et je ne veux pas le montrer.
csshtmloverflow
122
Awan

Utilisez overflow-y . Cette propriété est CSS 3.

218
janmoesen

pour masquer les barres de défilement horizontales, vous pouvez définir overflow-x sur hidden, comme ceci:

overflow-x: hidden;
59
Kornelius

Vous devez spécifier les variables width et height dans px:

width: 10px; height: 10px;

De plus, vous pouvez utiliser overflow: auto; pour empêcher l'affichage de la barre de défilement horizontale.

Par conséquent, vous voudrez peut-être essayer ce qui suit:

<div style="width:100px; height:100px; overflow: auto;" >
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
  text text text text text text text text text
</div>
50
Daniel Vassallo

Merci d'abord

Utilisez overflow:auto cela fonctionne pour moi.

la barre de défilement horizontale disparaît.

18
raji

Dans tous les cas, définissez overflow-x sur hidden et je préfère définir max-height afin de limiter le développement de la hauteur de la div. Votre code devrait ressembler à ceci:

overflow-y: scroll;
overflow-x: hidden;
max-height: 450px;
16
Brane

Pour afficher la barre de défilement verticale dans votre div, vous devez ajouter

height: 100px;   
overflow-y : scroll;

ou

height: 100px; 
overflow-y : auto;
13
Ricardo Romo
overflow-y : scroll;
overflow-x : hidden;

height est facultatif

3
Amobi Chuks

Vous pouvez utiliser la propriété de débordement

style="overflow: scroll ;max-height: 250px; width: 50%;"
2
Sunil Kumar

J'ai également fait face au même problème ... essayez de faire cela ... cela a fonctionné pour moi

        .scrollBbar 
        {
        position:fixed;
        top:50px;
        bottom:0;
        left:0;
        width:200px;
        overflow-x:hidden;
        overflow-y:auto;
       }
0
hemant