Cómo diseñar un div para que tenga un color de fondo para todo el ancho del contenido, y no solo para el ancho de la pantalla?

que tienen una página HTML que por el bien de esta pregunta es el siguiente:Cómo diseñar un div para que tenga un color de fondo para todo el ancho del contenido, y no solo para el ancho de la pantalla?

<html> 
<head> 
<style> 
div { width: 100%; } 
.success { background-color: #ccffcc; } 
</style> 
</head> 
<body> 
<div class="success"> 
<nobr>This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line. This is a very long line.</nobr> 
</div> 
</body> 
</html>

Nota de la "línea muy larga", y el color de fondo de ese div.

Mi problema (y apuesto a que es básico) es que el color de fondo se detiene en el borde de la pantalla. Cuando me desplazo hacia la derecha para ver el resto del texto, el resto del fondo del texto es blanco.

Básicamente quiero mi div comportarse de esta manera:

Para que el color de fondo especificado
al mínimo tienen el mismo ancho que la pantalla, incluso si el texto dentro es sólo unas pocas palabras
Para seguir el ancho del texto, si es mayor que el ancho de la pantalla
Opcionalmente (y sé que esto es realmente una pregunta diferente, de seguimiento), si tengo más de un div, siguiendo al primero, ¿hay alguna manera de que los dos sigan el ancho de la más amplia d iv automáticamente?

¿Eso tiene sentido?

¿Hay alguna manera de hacer esto?

He creado una página de prueba aquí, lo cual, si ve esto en el iPhone, aunque una pequeña fuente, muestra el problema: http://www.vkarlsen.no/test/test.html

vi las siguientes preguntas que aparecen como posibles duplicados y/o sugerencias por lo tanto, aquí es lo que noté cuando probé la información dentro:

iPad background for div blocks not spanning entire width of screen

probado los sugeridos <meta ... viewport .../> etiqueta, no hacer una diferencia (que está presente en la página de prueba en este momento.)
Background color stretches accross entire width of ul

<div> s ya se bloquean los elementos
WebKit doesn't paint background-color for entire width of final inline list item

intentado fijar el div a display: inline-block; pero esto no parece cambiar nada

Fuente

2012-01-02 Lasse Vågsæther Karlsen

Ha tratado 'min-width'? –

Intenté (justo ahora, después de ver tu comentario) reemplazar "ancho: 100%" con "mínimo ancho: 100%", ¿era correcto? No pareció cambiar nada. –

El problema aquí no es con el ancho del elemento en sí, que se está representando correctamente. Es con la propiedad 'white-space: nowrap;' que es la etiqueta 'nobr' por defecto. Si aplica la misma propiedad a una etiqueta diferente, se producirá el mismo comportamiento. No estoy seguro de por qué es esto, pero es un comienzo. –

magia negro:

<style> 
body { float:left;} 
.success { background-color: #ccffcc;} 
</style>

Si alguien tiene una explicación clara de por qué esto funciona, por favor comentar. Creo que tiene algo que ver con un efecto secundario del flotador que elimina la restricción que el cuerpo debe encajar en el ancho de la página.

Fuente

2012-01-08 03:46:37 user372719

Bastante sorprendente, por decir lo menos. No estoy seguro de por qué, pero al flotar el 'cuerpo' le permite adaptarse al ancho del' div'. De forma predeterminada, creo que el ancho de 'cuerpo' se restablece al ancho de los puntos de vista del navegador, pero al flotar hace que se comporte como si tuviera' ancho: auto'; Trabajó en FF y Webkit, no tuvo la oportunidad de probar IE u Opera. – kontur

¡Excelente! ¡Intenté hacer el div bg en un cuerpo transparente bg en android y funcionó! –

Es porque configuró width:100% que, por definición, solo abarca el ancho de la pantalla. Desea establecer el min-width:100% que lo establece en el ancho de la pantalla ... con la capacidad de crecer más allá de eso.

También asegúrese de configurar min-width:100% para body y html.

Fuente

2012-01-02 20:09:12 Tomas

Establecer el estilo 'min-width: 100%;' en div, body y html no cambia el resultado, aunque el ancho de los colores de los divs se volvió un poco más ancho, aún se detiene alrededor del borde de la pantalla . –

El ancho está restringido por el tamaño del cuerpo.Si aumenta el ancho del cuerpo, verá que permanece en una línea con el color de fondo.

Para mantener la anchura mínima: min-width: 100%

Fuente

2012-01-02 20:10:11 Rob

.success { background-color: #cffccc; overflow: scroll; min-width: 100%; }

Puede probar scroll o auto.

Fuente

2012-01-02 20:16:52

Agregar desbordamiento/desplazamiento a los divs hizo que contengan el color de fondo "completamente", pero cada div se desplaza de forma independiente. No pensé en mencionar que quiero que toda la página se comporte como una página. –

Luego crea una clase div externa = éxito con las demás dentro. –

El problema parece ser que los elementos block solo escalan hasta el 100% de su elemento contenedor, sin importar cuán grande sea su contenido: simplemente se desborda. Sin embargo, al parecer, los elementos inline-block cambian su ancho a su contenido real.

HTML:

<div id="container"> 
    <div class="wide"> 
     foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo 
    </div> 
    <div class="wide"> 
     bar 
    </div> 
</div>

CSS:

.wide { min-width: 100%; display: inline-block; background-color: yellow; } 
#container { display: inline-block; }

(El elemento container se dirige a su pregunta de seguimiento para hacer la segunda div tan grande como la anterior, y no sólo el ancho de la pantalla .)

También configuré un JS fiddle showing my demo code.

Si se encuentra con algún problema (especialmente problemas entre navegadores) con inline-block, mirar Block-level elements within display: inline-block podría ayudar.

Fuente

2012-01-02 21:18:25

Más tarde vi el violín de JS mencionado en el comentario de @anstosa - en realidad es una solución similar que utiliza 'table' y' table-row' como 'display' style. Sin embargo, la compatibilidad debería ser un poco mejor con 'inline-block'; IE <8 no admite 'tabla' de acuerdo con [MSDN] (http://msdn.microsoft.com/library/ms530751.aspx). –

Prueba de esto,

.success { background-color: #ccffcc; float:left;}

Fuente

2012-01-10 10:35:16 designersvsoft

El estilo de visualización inline-block parece hacer lo que quiera. Tenga en cuenta que la etiqueta <nobr> está en desuso y no debe utilizarse. El espacio en blanco no rompible es factible en CSS. Así es como me gustaría alterar sus reglas de estilo de ejemplo:

div { display: inline-block; white-space: nowrap; } 
.success { background-color: #ccffcc; }

alterar su hoja de estilo, retire las etiquetas <nobr> de su fuente, y darle una oportunidad. Tenga en cuenta que display: inline-block no funciona en todos los navegadores, aunque suele ser problemático en los navegadores antiguos (las versiones más recientes deberían serlo en cierta medida). Mi opinión personal es ignorar la codificación de buscadores rotos. Si su código cumple con los estándares, debería funcionar en todos los navegadores principales y modernos. Cualquier persona que todavía use IE6 (o anterior) merece el dolor. :-)

Fuente

2012-01-11 15:47:06

o probar esto,

.success { background-color: #ccffcc; overflow:auto;}

Fuente

2012-01-15 09:36:14

Cómo diseñar un div para que tenga un color de fondo para todo el ancho del contenido, y no solo para el ancho de la pantalla?

Respuesta

Cuestiones relacionadas