it-swarm.com.de

Wie kann ich die Breite von "overflow: auto;" Bildlaufleisten in einem dynamisch bemessenen absoluten Div?

(Erste Frage zum Stack Overflow. Hoffe, ich mache es richtig.)

Ich versuche, ein schwebendes Menü zu erstellen, das seine Breite von seinem Inhalt übernimmt (da ich die Breite im Voraus nicht kenne, d. H. Von einer URL geladen). Ich kann dies tun, indem ich das Menü div absolut positioniere, ohne eine Breite oder Höhe einzustellen.

Das Problem tritt auf, wenn der Inhalt so groß ist, dass ein Bildlauf erforderlich ist. Ich stelle "Überlauf: Auto;" Damit kann vertikal gescrollt werden, aber die neue Bildlaufleiste macht den div nicht breiter. Stattdessen bleibt das div gleich breit, und die Bildlaufleiste ragt in den zuvor recht großen Inhalt hinein, sodass der Inhalt umbrochen werden muss.

Beispiel: http://jsfiddle.net/w7Mm8/

Im Beispiel: In Firefox wird "five" in die nächste Zeile eingeschlossen, in Chrome (zumindest für Mac) wird alles in einer Zeile angezeigt.

Gibt es eine elegante Möglichkeit, dies zu tun, ohne die Breite des Menüs explizit auf die Breite der Bildlaufleiste festzulegen?

VIELEN DANK!

27
Tristan

Sie haben ein paar Möglichkeiten.

Verwenden Sie white-space:nowrap; und einige padding.

Verwenden Sie overflow: scroll; , das eine zusätzliche Bildlaufleiste unten hinzufügt, aber das Umbruchproblem in Firefox behebt.

Verwenden Sie overflow-y:scroll , das CSS3 ist und nur von modernen Browsern unterstützt wird.

4
bookcasey

Zufällig bin ich darauf gestoßen. Einstellung white-space: normal tatsächlich gemacht Firefox Schieben Sie die Bildlaufleiste nach außen. Siehe http://jsfiddle.net/w7Mm8/36/ .

Bearbeiten :Warten ...nicht mit nur fünf (die vorherige Geige hatte sechs Wörter): http://jsfiddle.net/w7Mm8/37/ . Irgendwie bewirkte das zusätzliche Wort, dass es sich benahm.

Edit2 : Basierend auf der obigen bizarren Beobachtung (der white-space: normal hatte eigentlich nichts damit zu tun, es war das zusätzliche Wort), gibt es eine bizarre "Problemumgehung", die sich für manche Leute als nützlich erweisen könnte (und ein Schmerz für andere). Siehe (fünf Wörter) http://jsfiddle.net/w7Mm8/49/ , (sechs Wörter) http://jsfiddle.net/w7Mm8/57/ . Die content muss aus 3 Zeichen bestehen und darf keine Leerzeichen enthalten (aus meinen Experimenten). Hinweis : Das Pseudoelement muss dort sein, wo der Textinhalt ist, wie tief er auch sein mag, siehe: http://jsfiddle.net/w7Mm8/58/ wo es nicht funktioniert.

1
ScottS