Wie füge ich Scrollleisten zu meinem HTML hinzu, die verschwinden, wenn der Inhalt kleiner ist als das Limit?

Question

Ich versuche, ein Formular zu erstellen, das ein erweiterbares Widget hat. Das Problem ist, dass wenn das Widget geöffnet ist, das Formular außerhalb der Grenze im Inhaltsfeld erweitert wird und es schlecht aussieht.

Ich habe versucht, overflow:scroll zu verwenden, aber es erstellt 2 hässliche Scrollleisten, die auch dann nicht verschwinden, wenn der Inhalt kleiner ist als das Inhaltsfeld. Ich brauche nur eine vertikale Scrollleiste.

Visual Studio hat auch darauf hingewiesen, dass overflow-y in CSS nicht verfügbar ist.

Answer 1

Ändern Sie den Overflow in auto und definieren Sie die Höhe und/oder Breite des Elements.

Answer 2

overflow-x und overflow-y sind Teil des CSS3-Vorschlags und funktionieren in allen aktuellen Versionen der vier großen Browser.

Ich mache normalerweise:

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

Der Grund ist, dass einige Browser overflow: auto manchmal als overflow: scroll behandeln (zwei hässliche Bildlaufleisten), sobald der Inhalt in eine Richtung überläuft. Diese Browser unterstützen jedoch bereits overflow-x und overflow-y, die Vorrang haben.

Answer 3

Swilliams gab eine gute Antwort darüber, wie man das Symptom behandeln soll. Aber Sie sollten auch über die zugrunde liegende Ursache nachdenken - wenn das Inhaltsfeld nicht auf eine feste Größe beschränkt wäre, könnte es schrumpfen und/oder sich ausdehnen, um sich jeder Formgröße anzupassen, ohne Scrollleisten. Webseiten sind flexibel konzipiert, und Versuche, diese Flexibilität zu "korrigieren", enden normalerweise in Problemen dieser Art.