Überlauf auf Multiselect-Box ändert Dokumentenhöhe

Ich habe ein div, die mit dem folgende CSS in y-Richtung scrollt:Überlauf auf Multiselect-Box ändert Dokumentenhöhe

height: auto; 
max-height: 300px; 
overflow: auto;

Das Problem ist, dass das Textfeld Hunderte von Positionen in ihnen haben kann und die Überlauf (obwohl nicht sichtbar) erweitert die Gesamthöhe der gesamten Seite und erstreckt sich über die Fußzeile der Seite hinaus.

Ich muss im Wesentlichen den Überlauf über die 300px Höhe hinaus verstecken. Aber offensichtlich, wenn ich überlaufe: versteckt, bekomme ich überhaupt keine vertikale Bildlaufleiste.

Quelle

2016-05-23 bkoenig

zeigen uns ein vollständiges Beispiel verwendet, die das Problem mit der Fußzeile zeigt. Höhe: Auto; ist vielleicht was ist in der Art und Weise –

Versuchen Sie Einstellung overflow zu scroll, das sollte es tun.

.overflow { 
 
    display: block; 
 
    height: 300px; 
 
    overflow-y: scroll; 
 
    background-color: white; 
 
    border: 1px solid #AEAEAE; 
 
    margin: 30px; 
 
}

<div class="overflow"> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 

 
</div>

Das perfekt funktioniert für mich.

Quelle

2016-05-23 18:39:05 s1h4d0w

Sorry, ich habe vergessen zu erwähnen, ich hatte das versucht und es hatte das gleiche Ergebnis. – bkoenig

@bkoenig Ich habe gerade Code zu meiner Antwort hinzugefügt und es funktioniert perfekt für mich. Achten Sie darauf, nach dem Klicken auf "Code-Snippet ausführen" auf die Schaltfläche "Ganze Seite" zu klicken. In dem kleinen Fenster auf der Website selbst ist es schwer zu erkennen. – s1h4d0w

@ s1h4d0w Wenn Sie meine Antwort nehmen, fügen Sie bitte auch meinen Namen hinzu – nonstop328

ich denke, das Sie

kann Ihnen helfen, Anzeige wählen: Inline-Block - diese verwendet, auf der die Breite Sie wie width:100px or width:50%

Anzeige anpassen möchten: Block; -einer auf der Breite 100%

.overflow { 
 
    display: block; 
 
    height: 300px; 
 
    overflow-y: scroll; 
 
    border: 1px solid black; 
 
    background-color: yellow; 
 
}

<div class="overflow"> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 
    <p>a</p> 
 

 
</div>

Quelle

2016-05-23 18:49:25 nonstop328

Überlauf auf Multiselect-Box ändert Dokumentenhöhe

Antwort

Verwandte Themen