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

136

Je souhaite afficher les conditions générales sur mon site Web. 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 je veux utiliser uniquement la barre de défilement verticale pour descendre 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 l'étalement jusqu'à ce que tout le texte apparaisse.
  2. Deuxièmement, il montre une barre de défilement horizontale et je ne veux pas l'afficher.
css html overflow Awan
la source
Le problème de largeur / hauteur est résolu par "Daniel Vassallo" et le problème de barre de défilement horizontal est résolu par "janmoesen". Maintenant, qui est la réponse dois-je accepter :) puis-je sélectionner plusieurs;)
Awan

Réponses:

238

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

Janmoesen
la source
Le problème de largeur / hauteur est résolu par "Daniel Vassallo" et le problème de barre de défilement horizontal est résolu par "janmoesen". Maintenant, qui est la réponse dois-je accepter :) puis-je sélectionner plusieurs;)
Awan
21
C'est assez évident: optez toujours pour l'opprimé, c'est-à-dire celui qui a la moins bonne réputation. ;-)
janmoesen
hahaha. Mais votre réponse n'est pas en détail à partir de "Daniel Vassallo" :)
Awan
Je m'efforce de «moins c'est plus» et laisse les liens parler. Quoi qu'il en soit, choisissez-en un et passez un bon week-end!
janmoesen
14
Je crois que la norme ici est de ne pas répondre à une question avec "juste" un lien, car les liens peuvent devenir invalides. Vous devez inclure suffisamment d'informations pour répondre directement à la question dans votre réponse, puis avoir le lien comme référence.
Jeffrey Harmon
66

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

overflow-x: hidden;
Kornelius
la source
J'ai l'impression que c'est la réponse que le demandeur voulait ... vous méritez plus de crédit
Ian Wise
52

Vous devez spécifier le widthet heightdans 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 pouvez 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>
Daniel Vassallo
la source
La largeur et la hauteur fonctionnent maintenant mais la barre de défilement horizontale n'est toujours pas supprimée.
Awan
Le problème de largeur / hauteur est résolu par "Daniel Vassallo" et le problème de barre de défilement horizontal est résolu par "janmoesen". Maintenant, qui est la réponse dois-je accepter :) puis-je sélectionner plusieurs;)
Awan
19

Merci d'abord

Utilisez overflow:autocela fonctionne pour moi.

la barre de défilement horizontale disparaît.

Raji
la source
15

Pour tous les cas mis overflow-xà hiddenet je préfère définir max-heightafin de limiter l'expansion de la hauteur du div. Votre code devrait ressembler à ceci:

overflow-y: scroll;
overflow-x: hidden;
max-height: 450px;
Brane
la source
13

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;
Ricardo Romo
la source
2
Je préfère utiliser max-height: 100px;.
Roman
En raison de ma configuration, c'était heightqui manquait, donc ne pas afficher les barres de défilement verticales, bien que cela height:100%;fonctionnait mieux pour moi.
SharpC
3 
overflow-y : scroll;
overflow-x : hidden;

height est facultatif

Amobi Chuks
la source
2

Vous pouvez utiliser la propriété overflow 

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

J'ai également rencontré le 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;
       }
singhkumarhemant
la source
0

Voici mon mélange:

overflow-y: scroll;
height: 13em; // Initial height.
resize: vertical; // Allow user to change the vertical size.
max-height: 31em; // If you want to constrain the max size.
Daniel De León
la source