width: 100% con position: absolute (CSS)

Question

Si lo hace:

<div style="width:auto;background:red;color:white">test</div> 

Se obtiene un div que se estira para llenar toda la anchura de la pantalla (100%).

Eso es lo que necesito que suceda.

Sin embargo, también necesito que se establezca la posición de inicio ... Por lo tanto, necesito una posición: absoluta.

Cuando agrego la posición: absoluta, el ancho del div es solo tan ancho como el contenido dentro de .. (Similar a los flotadores). ¿Hay alguna forma de evitar esto?

no puedo simplemente especificar el ancho: 100% ya que esto no tomar en cuenta tamaños de la frontera, etc ..

Gracias, Wesley

Answer 1

Cuando agregue la posición: absoluta, el ancho del div es tan ancho como el contenido dentro de .. (Similar a los flotadores). ¿Hay alguna manera alrededor de esto?

no puedo simplemente especificar el ancho: 100% ya que no toma en cuenta a tamaños de la frontera, etc ..

Usted podría utilizar position:absolute; left:0; right:0; top:0.

De esta manera: http://jsfiddle.net/thirtydot/yQWGV/

Answer 2

Puede utilizar width: 100% y la caja atributo css -sizing, para hacer que el modelo de caja funcione como IE 5.5, es decir, relleno y borde contados en el ancho.

div.absolute { 
    width: 100%; 
    border: 5px solid #000; 
    background-color: #F00; 
    position: absolute; top: 100px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    padding: 50px; 
} 

Aquí es un violín: http://jsfiddle.net/dJtm2/

Tenga cuidado, sin embargo, ya que es una forma relativamente nueva de atributos CSS3 y sólo funcionará en los nuevos navegadores, y como se puede ver en mi ejemplo requiere la medida contraproducente terrible eso es prefijos del vendedor.

Answer 3

simplemente escribe así:

div.absolute { 
    border: 5px solid #000; 
    background-color: #F00; 
    position: absolute; 
    top: 100px; 
    padding: 50px; 
    left:0; 
    right:0; 
} 

http://jsfiddle.net/dJtm2/1/

en este padding & border no aumenta el ancho del elemento.