El ancho 100% DIV no es realmente 100%

Cuando tengo un

con width: 100% , no es realmente 100%:

 
testtesttesttesttest
... #div { width: 100%; background-color: red; }

Ahora cuando cambia el tamaño de la ventana, entonces hay una barra de desplazamiento horizontal, y se desplaza hacia la derecha, luego el fondo se desvanece. ¿Cómo puedo seguir siendo el fondo en este caso?

Aquí puede ver el problema en acción: http://beta.ovoweb.net/?i=3

Ahora cuando cambia el tamaño de la ventana y se desplaza hacia la derecha, ya no puede ver el fondo. ¿Cómo arreglar esto?

El valor del 100% es 100% del ancho del padre o el puerto de vista. Ver la documentación .

Ancho: 100%, se ve muy afectado por su margen y margen y el relleno de su elemento primario (cuerpo en su caso). SO, restablecerlos primero

Algo como

 body { margin: 0; padding: 0; } #div { margin: 0; width: 100%; background-color: red; } 

MANIFESTACIÓN

agregar esto a css:

 html, body { width: 100%; height: 100%; margin: 0px; padding: 0px; } 

Entonces debería funcionar.

El 100% es solo el 100% del ancho disponible, según el contenedor principal. Entonces, si crea un DIV con un ancho de 500 píxeles, anide otro DIV dentro con un ancho del 100%, su DIV 100% puede expandirse a un máximo de 500 píxeles (sin contar el relleno o margen, por lo que debe restablecerlos a 0).

Esto debe hacerlo (agregue esta línea a la parte superior de su archivo CSS):

 * { margin: 0; padding: 0; } 

Funciona todo el tiempo para mi.

la mayor parte del tiempo agrego este bit de código a mi css. Debería funcionar para ti también. sí, 100% de ancho o alto siempre se basa en el contenedor principal.

CSS

 *{ margin:0; padding:0; } html,body{ height:100%; width:100%; } #container{ width:100%; height:100%; background:gray; position:relative; display:block; } #content{ height:50px; width:50px; bottom:20px; right:10%; background:red; position:absolute; } 

HTML

 

SALIDA

enter image description here

En mi caso, la etiqueta div no ocupaba el 100% de su etiqueta primaria porque la div tenía una pantalla de “en línea”. Cambiarlo a “bloque en línea” solucionó ese problema.