utilizzando solo i CSS, è possibile creare un div che copre l'intera area contenuto del documento esattamente?

Question

Mi chiedo solo se è possibile utilizzare solo i CSS ma non javascript per lo stile un DIV che coprirà l'intera area del contenuto esattamente? (Nota: il contenuto complesso, non solo la finestra). Non sembra possibile, perché l'elemento ha un certo margine, e sembra che non v'è alcun modo semplice per lo stile del div di includere tale larghezza del margine e altezza dell'elemento corpo. Ma in realtà è possibile?

Aggiorna : sorry, un requisito è che non siamo in grado di impostare il margine di per 0 ... (Update2: diciamo, se abbiamo bisogno di farne una biblioteca e possono 't chiedere a tutte le persone che lo utilizzano per impostare il corpo per avere margine di 0)

Answer 1

Se il margine è impostato, allora potrebbe non utilizzare i margini negativi sulle

per ignorare i margini? Capisco margini possono variare tra i browser. Se il ha un margine di 10px, allora il tuo stile div in questo modo:

div#mydiv {
margin: -10px;
}

Si potrebbe usare lo stesso principio per ignorare imbottitura (se applicabile).

Answer 2

Certo, credo.

margini di ripristino di default:

* { margin: 0; padding: 0; }

poi per

<div id="shader"></div>

fare:

#shader {position: absolute; width: 100%; height: 100%; min-height: 100%; top: 0; left: 0;}

Answer 3

Questa è probabilmente una soluzione, ma non funzionerà in IE ...

div.cover { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; }

Answer 4

A rigor di logica, questo è impossibile. Il tuo DIV deve andare all'interno del corpo, non al di fuori.

O, per dirla in altro modo, lei ha chiesto per l'intera "area di contenuto" da coprire, ma non è in realtà ciò che si vuole, si desidera che l'intero corpo da coprire.

Lazlow ha il miglior consiglio. Forse impostare i margini / padding a qualcosa di grande in modo da poter essere sicuro che sia più grande di quello predefinito del browser negativo, quindi hanno un div interno con gli stessi valori di margine / padding solo positivo?

Answer 5

Sì. è sufficiente impostare l'imbottitura e il margine del tag body a 0, poi si imposta l'imbottitura e il margine del tag div a zero.

Answer 6

Che dire di questo?

<div style="position:absolute;left:0px;top:0px;width:100%;height:100%;">...

Answer 7

È piaciuto risposta di Ambrogio. Il corpo è il contenitore finale per il codice HTML. Non ho visto i margini nel corpo con Mozilla, Chrome, IE, o Opera - le versioni attuali. Per dimostrarlo: stile
body {background-color: yellow;} / * e dare un'occhiata. * /

In ogni caso, è sempre una buona pratica per normalizzare i browser di impostazione per il margine, padding, ecc a zero! come Dmitri Farkov sopra

Answer 8

Penso che ci sia alcun modo per rendere il div "galleggiare" sopra il browser, se sarebbe così, allora la tecnologia potrebbe superare il vostro schermo, qualcosa di simile corpo style = "margin: -40px" - questo dovrebbe sanguinare sul tuo desktop?

E tra l'altro, html stile è anormale, ciò che si dovrebbe fare dopo? stile , ?? In ogni caso ci sono così è possibile impostare gli stili su ognuna di esse, ma non credo che sarebbe stato molto intelligente.

Non so se questo potrebbe aiutare:

<div style="margin:-100%">

Ma dubito che questo possa superare la finestra del browser ...

Answer 9

Credo che l'approccio di MiffTheFox è la migliore, perché la sua soluzione copre la situazione in cui altri div ha posizionamento assoluto. Ricordare che elementi di posizionamento assoluti spengono il flusso, e se ogni elemento è posizionato ad esempio in alto: 9000px, statura non sarà> 9000px

.

Answer 10

<style type="text/css">
    #superdiv{ position:fixed; top:0; left:0; width:100%; height:100%; }
</style>

<div id="superdiv">
    Put some content here.
</div>