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:

Il ne fixe pas la largeur et la hauteur et l'étalement jusqu'à ce que tout le texte apparaisse.
Deuxièmement, il montre une barre de défilement horizontale et je ne veux pas l'afficher.

css html overflow

— Awan
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

238

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

— Janmoesen
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
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
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
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
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
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
source

2

Vous pouvez utiliser la propriété overflow

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

— Sunil Kumar
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
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
source