nur mit CSS, ist es möglich, ein div zu erstellen, das den gesamten Inhaltsbereich des Dokuments genau abdeckt?

Question

Ich frage mich nur, ob es möglich ist, nur CSS, aber nicht Javascript zu verwenden, um ein DIV zu stylen, das den gesamten Inhaltsbereich genau abdeckt? (Hinweis: gesamter Inhalt, nicht nur das Ansichtsfenster). Es scheint nicht möglich, weil das < body> -Element einen gewissen Spielraum hat, und es scheint, als gäbe es keine einfache Möglichkeit, das div zu stylen, um die Randbreite und die Höhe des body-Elements einzuschließen. Aber ist es möglich?

aktualisieren: sorry, eine Voraussetzung ist, dass wir nicht die Marge von < body> auf 0 setzen kann ... (update2: sagen, wenn wir es in eine Bibliothek zu machen brauchen und fragen können nicht alle Leute, die es benutzen, um den Körper einzustellen, Rand zu haben 0)

Answer 1

Wenn die < Körper > Ränder gesetzt ist, dann nicht könnten Sie negative Margen auf der Verwendung <div>, um die < Körper > Margen zu überschreiben? Ich verstehe < Körper > Margen können zwischen Browsern variieren. Wenn der < Körper > eine Marge von 10px hat, Stil dann div wie so:

div#mydiv { 
margin: -10px; 
} 

Sie würden das gleiche Prinzip verwenden padding außer Kraft zu setzen (falls zutreffend).

Answer 2

Sicher, denke ich.

zurücksetzen Standardränder:

* { margin: 0; padding: 0; } 

dann für

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

tun:

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

Answer 3

Ja. Sie setzen nur den Abstand und den Rand des body-Tags auf 0, dann setzen Sie den Abstand und den Rand des div-Tags auf Null.

Answer 4

was ist das?

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

Answer 5

Dies ist wahrscheinlich eine Lösung, aber es wird im IE nicht funktionieren ...

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

Answer 6

Logisch ist das unmöglich. Dein DIV muss in den Körper gehen, nicht nach draußen.

Oder um es anders auszudrücken, Sie haben darum gebeten, dass der gesamte "Inhaltsbereich" abgedeckt wird, aber das ist nicht das, was Sie wollen, Sie wollen, dass der gesamte Körper abgedeckt wird.

Lazlow hat den besten Vorschlag. Vielleicht legen Sie die negativen Ränder/Padding auf etwas großes, so dass Sie sicher sein können, dass es größer ist als der Browser-Standard, dann haben Sie eine innere Div mit den gleichen Rand/Padding-Werte nur positiv?

Answer 7

Liked Ambroses Antwort. Der Body ist der ultimative Container für Ihr HTML. Ich habe mit Mozilla, Chrome, IE oder Opera - aktuelle Versionen - keine Ränder im Body gesehen. Um es zu beweisen: Stil
Körper {Hintergrundfarbe: gelb;}/* und werfen Sie einen Blick. */

In jedem Fall ist es immer eine gute Übung, die Browsereinstellungen für Rand, Padding usw. auf Null zu normalisieren! wie Dmitri Farkov über

Answer 8

Ich denke, es gibt keine Möglichkeit, das div "float" über Ihren Browser, wenn dies der Fall wäre, könnte die Technologie Ihren Bildschirm überwinden, etwas wie body style = "margin: -40px" - sollte dieses bluten auf Ihrem Desktop?

Und übrigens, HTML-Stil ist abnormal, was würden Sie als nächstes tun? Stil, ?? Auf jeden Fall SIND sie da, also könntest du Styles auf allen von ihnen setzen, aber ich denke nicht, dass es viel clever wäre.

Ich weiß nicht, ob dies helfen könnte:

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

Aber ich bezweifle, dass dies die Browser-Fenster überwinden ...

Answer 9

denke ich MiffTheFox Ansatz ist die beste, weil seine Lösung der Abdeckungen Situation, in der andere Divs absolute Position haben. Denken Sie daran, dass absolute Positionierungselemente den Fluss verlassen, und wenn ein Element zum Beispiel oben positioniert ist: 9000px, ist die Körperhöhe nicht> 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>