Comment puis-je inclure la largeur du “overflow: auto;” barres de défilement dans la dynamique de la taille absolue de la div?

(Première question sur le Débordement de la Pile. De l'espoir, je suis en train de faire.)

Je suis en train de créer un menu flottant qui hérite de la largeur de son contenu (puisque je ne connais pas la largeur à l'avance, c'est à dire chargé à partir d'une URL). Je peux le faire par le menu div en position absolue sans réglage de hauteur ou de largeur.

Le problème se produit lorsque le contenu est assez grand pour exiger de défilement. J'ai mis "overflow: auto;" de sorte qu'il peut être défile verticalement, mais la nouvelle barre de défilement n'est pas faire de la div en plus large. Au lieu de cela, le div reste la même largeur, et la barre de défilement qui se projette dans son déjà bien contenu à la taille, forçant le contenu à enrouler.

Exemple: http://jsfiddle.net/w7Mm8/

Dans l'exemple: dans Firefox, "cinq" s'amalgament à la ligne suivante, mais dans Chrome (pour Mac au moins), tout est indiqué sur une ligne.

Toute manière élégante de le faire sans définition explicite de la largeur du menu pour inclure la largeur de la barre de défilement?

MERCI!

  • Autant que je sache, il n'y a aucun moyen de le faire sans l'aide de JavaScript. J'aimerais savoir si je suis mal!
  • Le vilain hack-fix est que lorsque vous savez que le contenu est trop grand et les barres de défilement sera visible, vous pouvez définir explicitement la largeur de la div contenant sur sa largeur intérieure + la largeur de votre navigateur, les barres de défilement (c'est à dire avec un code comme ceci: jdsharp.us/jQuery/minute/calculate-scrollbar-width.php). Dans google Chrome pour Mac, la barre de défilement largeur est de 0, afin de ne pas ajouter de l'espace supplémentaire. Dans Firefox pour Mac, la barre de défilement largeur est de 15.
  • Ouais, c'est le genre de JavaScript dont je parlais.
  • Une chose qui est intéressant, c'est qu'il n'a pas d'importance combien de remplissage à droite de vous mettre sur la div, il est toujours envelopper dans un FF si une barre de défilement s'affiche. Voir jsfiddle.net/w7Mm8/30.
  • le code dans le lien que vous avez fourni pour calculer la largeur de défilement a un bug. Vous devez ajouter un supplément de </div> le code html qu'il crée dynamiquement.
InformationsquelleAutor Tristan | 2011-12-07
  1. 4

    Vous avez quelques options.

    Utilisation white-space:nowrap; et certains padding.

    Utilisation overflow: scroll;, ce qui ajoute une barre de défilement sur le fond, mais les correctifs de l'emballage problème dans Firefox.

    Utilisation overflow-y:scroll qui est du CSS3 et est pris en charge uniquement par les navigateurs modernes.

    • C'est la meilleure solution jusqu'à présent, si, techniquement, aucun d'eux ne permet de résoudre le problème à la perfection. Le white-space:nowrap; rembourrage est étrangère lorsque la barre de défilement n'est pas visible. Et le overflow[-y]:scroll; options afficher une barre de défilement, même si il n'est pas nécessaire. Habillage de l'un des trois cas un peu de Javascript (pour quand le contenu est trop grand) permet de résoudre cela, et c'est certainement mieux que ma solution que de forcer une nouvelle largeur, donc je vais l'utiliser pour le moment. Merci!
    • (C'est tellement étrange que overflow:scroll; ajoute la barre de défilement de la largeur du contenu, alors que overflow:auto; ne l'est pas, même lorsque la barre de défilement est visible dans les deux cas.)
    • Aussi, le white-space:nowrap force un défilement horizontal sur le long contenu: jsfiddle.net/w7Mm8/32.
    InformationsquelleAutor bookcasey
  2. 1

    Par hasard je suis tombé sur cette. Réglage white-space: normal en fait, Firefox pousser la barre de défilement à l'extérieur. Voir http://jsfiddle.net/w7Mm8/36/.

    Modifier: Attendre... pas seulement de cinq (la précédente violon avait six mots): http://jsfiddle.net/w7Mm8/37/. En quelque sorte, le mot causé de se comporter.

    Edit2: Basé sur l'étrange observation ci-dessus (l' white-space: normal n'a vraiment rien avoir à faire avec elle, c'était le mot), il est bizarre ce "contournement" qui peut s'avérer utile pour certaines personnes (et une douleur pour les autres). Voir (cinq mots) http://jsfiddle.net/w7Mm8/49/, (six mots) http://jsfiddle.net/w7Mm8/57/. Le content doit être fixé à 3 caractères et ne peut pas être des espaces (à partir de mes expériences). Note: le pseudo-élément est où le contenu du texte est cependant riche qu'il est, voir: http://jsfiddle.net/w7Mm8/58/ où il ne fonctionne pas.

    InformationsquelleAutor ScottS