Comment puis-je inclure la largeur de "débordement: auto;" barres de défilement dans un div absolu de taille dynamique?
(Première question sur Stack Overflow. J'espère que je vais bien faire les choses.)
J'essaie de créer un menu flottant qui hérite de la largeur de son contenu (car je ne connais pas la largeur à l'avance, c'est-à-dire qu'elle est chargée à partir d'une URL). Je peux le faire en ayant le menu div positionné absolument sans définir de largeur ou de hauteur.
Le problème survient lorsque le contenu est suffisamment grand pour nécessiter un défilement. Je mets "débordement: auto;" afin de pouvoir faire défiler verticalement, mais la nouvelle barre de défilement ne rend pas la div plus large. Au lieu de cela, la div reste à la même largeur et la barre de défilement se prolonge dans son contenu précédemment de bonne taille, forçant le contenu à être renvoyé à la ligne.
Exemple: http://jsfiddle.net/w7Mm8/
Dans l'exemple: dans Firefox, "cinq" sont placés sur la ligne suivante, mais dans Chrome (au moins pour Mac), tout est affiché sur une seule ligne.
Un moyen élégant de le faire sans définir explicitement la largeur du menu pour inclure la largeur de la barre de défilement?
MERCI!
Vous avez quelques options.
Utilisez white-space:nowrap; et un padding.
Utilisez overflow: scroll; , qui ajoute une barre de défilement supplémentaire au bas de la page, mais corrige le problème d’emballage dans Firefox.
Utilisez overflow-y:scroll qui correspond à CSS3 et n’est pris en charge que par les navigateurs modernes.
Par chance je suis tombé sur cela. La définition de white-space: normal a effectivement rendu Firefox pousser la barre de défilement à l'extérieur. Voir http://jsfiddle.net/w7Mm8/36/ .
Edit :attendez ...pas avec seulement cinq (le violon précédent avait six mots): http://jsfiddle.net/w7Mm8/37/ . D'une manière ou d'une autre, le mot supplémentaire l'a fait se comporter.
Edit2 : D'après l'observation étrange ci-dessus (le white-space: normal n'avait rien à voir avec cela, c'était le mot supplémentaire), il existe une "solution de contournement" bizarre qui pourrait s'avérer utile à certaines personnes (et une douleur pour les autres). Voir (cinq mots) http://jsfiddle.net/w7Mm8/49/ , (six mots) http://jsfiddle.net/w7Mm8/57/ . La content doit être définie sur 3 caractères et ne peut pas être un espace (de mes expériences). Remarque : le pseudo-élément doit figurer à l'emplacement où le contenu du texte est, quelle que soit sa profondeur, voir: http://jsfiddle.net/w7Mm8/58/ où il ne fonctionne pas.