width: 100% con la posizione: assoluta (css)

Question

Se lo fai:

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

Si ottiene un div che si distende per riempire l'intera larghezza dello schermo (100%).

Questo è quello che devo succedere.

Tuttavia, ho anche bisogno di impostare la posizione iniziale .. Quindi ho bisogno di posizione: assoluta.

Quando aggiungo la posizione: assoluta, la larghezza del div è ampia solo quanto il contenuto all'interno .. (Simile ai float). C'è un modo per aggirare questo?

Non posso semplicemente specificare width: 100% dal momento che questo non tiene in conto la dimensione di confine, ecc ..

Grazie, Wesley

Answer 1

Quando aggiungo position: absolute, la larghezza del div è soltanto largo quanto il contenuto all'interno .. (Simile a carri). C'è un modo per aggirare lo ?

Non posso semplicemente specificare width: 100% dal momento che questo non tiene in conto per dimensioni di confine, ecc ..

Si potrebbe utilizzare position:absolute; left:0; right:0; top:0.

Ti piace questa: http://jsfiddle.net/thirtydot/yQWGV/

Answer 2

È possibile utilizzare width: 100% e la casella attributi CSS -misura, per far funzionare il modello di box come IE 5.5, cioè il padding e il conteggio dei contorni nella larghezza.

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; 
} 

Ecco un violino: http://jsfiddle.net/dJtm2/

Diffidare anche se, come si tratta di un relativamente nuovo attributo CSS3 e funziona solo in browser più recenti, e come potete vedere dal mio esempio richiede la misura spaventosa controproducente questo è il prefisso del venditore.

Answer 3

è sufficiente scrivere in questo modo:

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

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

in questo padding & border non aumentare la larghezza dell'elemento.