css - solares - que es el factor de proteccion solar fps

100% de ancho 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 cambia el tamaño de la ventana, hay una barra de desplazamiento horizontal, y se desplaza hacia la derecha, luego el fondo desaparece. ¿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?

Answer 1

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, luego anida otro DIV con un ancho del 100%, su DIV al 100% se puede expandir hasta un máximo de 500 píxeles (sin contar ningún relleno o margen, por lo que debe restablecerlos a 0).

Answer 2

Ancho: 100%, está muy afectado por su margen y margen y el relleno de su padre (cuerpo en su caso). Asi que reinicialas primero

Algo como

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

DEMO

Answer 3

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

Answer 4

En mi caso, la etiqueta div no ocupó 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.

Answer 5

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

* { margin: 0; padding: 0; }

Trabaja todo el tiempo para mi.

Answer 6

La mayoría de las veces agrego este bit de código a mi css. Debería funcionar para ti también. Sí, el 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

agrega esto a css:

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

Entonces debería funcionar.