html - resto - ¿Cómo puedo incluir el ancho de las barras de desplazamiento "overflow: auto;" en un div absoluto de tamaño dinámico?
hacer que un div ocupe todo el ancho (2)
(Primera pregunta sobre Stack Overflow. Espero hacerlo bien).
Intento crear un menú flotante que herede su ancho de su contenido (ya que no conozco el ancho por adelantado, es decir, cargado desde una URL). Puedo hacer esto teniendo el menú div completamente posicionado sin establecer un ancho o alto.
El problema ocurre cuando el contenido es lo suficientemente alto como para requerir desplazamiento. Configuré "desbordamiento: automático"; para que se pueda desplazar verticalmente, pero la nueva barra de desplazamiento no ensancha el div. En cambio, el div se mantiene del mismo ancho, y la barra de desplazamiento sobresale en su contenido previamente de buen tamaño, lo que obliga a que el contenido se envuelva.
Ejemplo: http://jsfiddle.net/w7Mm8/
En el ejemplo: en Firefox, "cinco" se ajusta a la siguiente línea, pero en Chrome (al menos para Mac), todo se muestra en una línea.
¿Alguna forma elegante de hacer esto sin establecer explícitamente el ancho del menú para incluir el ancho de la barra de desplazamiento?
¡GRACIAS!
Por casualidad me encontré con esto. Configuración white-space: normal es que Firefox presione la barra de desplazamiento hacia fuera. Ver http://jsfiddle.net/w7Mm8/36/ .
Editar : Espere ... no con solo cinco (el violín anterior tenía seis palabras): http://jsfiddle.net/w7Mm8/37/ . De alguna manera, la palabra extra hizo que se comportara.
Edit2 : Basado en la extraña observación anterior (el white-space: normal no tenía nada que ver con eso, era la palabra extra), hay una extraña "solución" que puede ser útil para algunas personas (y un dolor para otros). Ver (cinco palabras) http://jsfiddle.net/w7Mm8/49/ , (seis palabras) http://jsfiddle.net/w7Mm8/57/ . El content debe establecerse en 3 caracteres y no puede ser espacios (de mis experimentos). Nota : el pseudo elemento tiene que estar donde está el contenido del texto, sin importar cuán profundo sea, consulte: http://jsfiddle.net/w7Mm8/58/ donde no funciona.
Tienes pocas opciones.
Use white-space:nowrap; y algo de padding .
Usar overflow: scroll; , que agrega una barra de desplazamiento adicional en la parte inferior, pero soluciona el problema de envoltura en Firefox.
Use overflow-y:scroll que es CSS3 y solo es compatible con navegadores modernos.