Comment ajouter des barres de défilement à mon code HTML qui disparaissent si le contenu est inférieur à la limite

Question

J'essaie de créer un formulaire avec un widget extensible. Le problème est que, lorsque le widget est ouvert, le formulaire s'étend en dehors de la limite dans la zone de contenu et il a l'air mauvais.

J'ai essayé d'utiliser overflow: scroll , mais cela crée 2 barres de défilement laides qui ne disparaissent pas même si le contenu est plus petit que la zone de contenu. Je n'ai besoin que d'une barre de défilement verticale.

Visual Studio a également averti que overflow-y n'est pas disponible en CSS.

Answer 1

Modifiez votre dépassement en auto et définissez la hauteur et / ou la largeur de l'élément.

Answer 2

overflow-x et overflow-y font partie de la proposition CSS3 et fonctionnent dans toutes les versions actuelles des quatre grands navigateurs.

Je fais habituellement:

overflow: auto;
overflow-x: auto;
overflow-y: auto;

La raison en est que parfois les navigateurs traitent overflow: auto comme overflow: scroll (deux barres de défilement laides) dès que le contenu déborde dans un sens, mais ces navigateurs prennent déjà en charge overflow-x et overflow-y , qui sont prioritaires.

Answer 3

Swilliams a donné une bonne réponse sur la manière de traiter le symptôme. Mais vous voudrez peut-être aussi penser à la cause première du problème: si la zone de contenu n'était pas limitée à une taille fixe, elle pourrait être réduite et / ou développée de manière à s'adapter à toutes les tailles, sans barres de défilement. Les pages Web sont flexibles par conception et tentent de "réparer" les problèmes rencontrés. cette flexibilité finit généralement par rencontrer des problèmes de ce type.