CSS max-height und Überlauf Auto zeigen immer vertikale Scroll

ich eine div class habe mit folgendem CSS-Stil eingerichtet:CSS max-height und Überlauf Auto zeigen immer vertikale Scroll

div.multiple_choice{ 
    border: 1px solid black; 
    max-width: 300px; 
    max-height: 200px; 
    overflow: auto; 
}

Das Problem ist, wenn der Text in nicht DIV zwingt zu erreichen Die maximale Höhe von 200px, die vertikale Bildlaufleiste zeigt immer noch. Ich kann auf die Pfeile nach oben und nach unten klicken, aber es verschiebt den Inhalt nur um ein oder zwei Pixel nach oben oder unten.

Dies wird in Google Chrome (Version 18.0) und Iceweasel auftretenden 11.

Quelle

2012-04-20 lightningmanic

Need einen Testfall zu sehen.Ich kann das auf einer Testseite in Firefox nicht verifizieren (es sei denn, Iceweasel benutzt einen wirklich alten Build von Gecko). – BoltClock

@ BoltClock's Einicorn Iceweasel hat die gleiche Versionsnummerierung wie Firefox, also 11 ist die neueste Version. –

@Mr Lister: Gut zu wissen. – BoltClock

Wie sich herausstellt, verursachte eine andere CSS-Stil, die Frage:

body{ 
    line-height: 1; 
}

Wer wissen, wie und warum dies würde ein Problem verursachen kann here

Quelle

2012-04-20 18:47:22 lightningmanic

Ihr Link erklärt nicht, wie/warum 'line-height' dieses Problem verursacht. – matthewpavkov

@nuclearpenguin, So _how_ hat 'line-height' irgendwelche Auswirkungen auf die Schriftrolle? Es gibt nichts in Ihrem Link – Izkata

Ich habe auch dieses Problem erlebt. Setzen Sie 'line-height' auf' normal' für die Elemente innerhalb des divs fest. –

begegne ich habe diese problem.but ich löste diese verwenden Sie die folgende CSS-Stil über die Eigenschaft line-height lesen:

div.yourcontainer{overflow-y:auto;}

Wenn der Container höher als die maximale Höhe war, wird die vertikale Bildlaufleiste angezeigt.

Quelle

2013-05-07 02:41:18 GoodLuckBamboo

Ich hatte auch dieses Problem mit Bootstrap und Nav. Dies ist darauf zurückzuführen, dass der Bootstrap die li in Nav-Tabs definiert als: .nav-tabs > li { margin-bottom:-1px; }. Um dem entgegenzuwirken, müssen Sie auch tun:

.nav-tabs > li:last-child { 
    margin-bottom:0; 
}

Ohne das letzte Kind-Einstellung würde das folgende Beispiel immer scroll zeigen, egal wie viel Inhalt ist in der Liste:

<ul class="navs nav-tabs nav-stacked" style="max-height:80px;overflow:auto;"> 
    <li></li> 
    ... 
</ul>

Quelle

2013-07-02 21:52:42 vol7ron

Ich bin heute früh auf diesen Fehler gestoßen. In meinem Fall hatte eine Liste der untergeordneten Elemente display: inline-block statt display: block. Wechseln zu display: block für meine Liste der Kind-Elemente in der abgeschnittenen Div repariert das Problem für mich.

Quelle

2015-01-20 22:34:03

Ich hatte ein Problem mit diesem, und ich fand, dass position: relative auf den Kindelementen das Problem verursachte. Offensichtlich kann dies nicht die Lösung für jeden sein, besonders wenn position: absolute verwendet wird, aber für mich hat es funktioniert.

Quelle

2015-07-28 13:59:02

Ich hatte dieses Problem bei dem Versuch, eine Liste (flex Spalte) wickeln von Komponenten in einem div reagieren, ich gelöst es durch Elemente innerhalb jeder Listenposition zu ändern Marge 0.

Der Ansatz, dies zu beheben Für mich war es, die Listenelemente zu überprüfen (vielleicht jedes <li> in OP) und zu sehen, welche Stile das div denken ließen, dass jedes Listenelement größer als das war, was für das menschliche Auge sichtbar war.

Hier ist ein Beispiel für einen Schelm Marge auf einem Symbol in einem Listenpunkt in meinem Projekt Inspektion:

Lösung ist den Stil dieses Symbols setzen einen senkrechten Abstand von 0 zu haben, obwohl in meinem Anwendung Ich habe gerade alle Rand 0 und fügte einige Padding-rechts.

Quelle

2017-07-05 00:46:35

CSS max-height und Überlauf Auto zeigen immer vertikale Scroll

Antwort

Verwandte Themen