100% ancho de DIV no es realmente 100%

Question

Cuando tengo un <div> con width: 100%, en realidad no es 100%:

<div id="div">testtesttesttesttest</div> 

... 

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

Ahora, cuando se cambia el tamaño de la ventana, así que hay una barra de desplazamiento horizontal, y usted desplácese hacia la derecha, luego el fondo se desvanece. ¿Cómo puedo seguir siendo el fondo en este caso?

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

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

Answer 1

El valor del 100% es 100% del ancho del padre o el puerto de la vista. Vea el documentation.

Answer 2

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

Algo como

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

DEMO

Answer 3

100% sólo es 100% de la anchura disponible, basado en 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).

Answer 4

añadir esto a css:

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

entonces debería funcionar.

Answer 5

Este oughta hacerlo (añadir esta línea a la parte superior de su archivo CSS):

* { margin: 0; padding: 0; } 

trabaja todo el tiempo para mí.

Answer 6

la mayoría de las veces agrego this bit of code 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

<div id="container"> 
    <div id="content"> 
    </div> 
</div>​ 

SALIDA

Answer 7

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