nur mit Hilfe von CSS ist es möglich, ein div zu erstellen, die das gesamte Dokument Inhaltsbereich genau abdeckt?

Question

Ich frage mich nur, wenn es CSS nur zu verwenden, möglich ist aber kein Javascript einen DIV, um Stil, den den gesamten Content-Bereich genau deckt bis? (Anmerkung: Die gesamten Inhalt, nicht nur das Ansichtsfenster). Es scheint nicht möglich, weil das Element einer gewissen Spielraum hat, und es scheint, als gäbe es keine einfache Möglichkeit, die div Stil, die Randbreite und die Höhe des Körperelementes aufzunehmen. Aber in der Tat ist es möglich?

Aktualisieren : sorry, eine Voraussetzung ist, dass wir nicht die Marge von auf 0 setzen können ... (update2: sagen, wenn wir es in eine Bibliothek zu machen brauchen und können ‚t alle Leute fragen, die sie nutzen den Körper gesetzt haben Rand 0)

Answer 1

Wenn der Rand gesetzt ist, dann könnte man nicht verwenden negative Margen auf den

Rand außer Kraft zu setzen? Ich verstehe Ränder zwischen den Browsern unterschiedlich sein können. Wenn der eine Marge von 10px hat, dann du deinen div etwa so:

div#mydiv {
margin: -10px;
}

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

Answer 2

Klar, denke ich.

Zurücksetzen Standardränder:

* { margin: 0; padding: 0; }

dann

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

tun:

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

Answer 3

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 4

Logisch, das ist unmöglich. Ihre DIV hat im Innern des Körpers zu gehen, nicht außerhalb.

Oder um es anders auszudrücken, fragte man für das gesamt „Inhaltsbereich“ abgedeckt werden, aber das ist nicht wirklich, was Sie wollen, können Sie der gesamte Körper bedeckt werden sollen.

Lazlow hat den besten Vorschlag. Vielleicht setzen die negativen Margen / padding zu etwas groß, so können Sie sicher sein, es ist größer als der Standard-Browser, dann mit den gleichen Marge / padding Werte eine innere div haben nur positive?

Answer 5

Ja. Sie setzen nur die Polsterung und Marge des Body-Tag auf 0, dann stellen Sie die Polsterung und Marge des div-Tags auf Null zurück.

Answer 6

was ist das?

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

Answer 7

Ambrose Antwort Zufrieden. Der Körper ist die ultimative Container für Ihre HTML. Ich habe keine Margen im Körper mit Mozilla, Chrome, IE, Opera oder gesehen - aktuellen Versionen. Um das zu beweisen: Stil
body {background-color: gelb;} / * und einen Blick darauf werfen. * /

in jedem Fall ist es immer eine gute Praxis, die Browser-Einstellung für Spielraum zu normalisieren, Polsterung, usw. auf Null! wie Dmitri Farkov oben

Answer 8

Ich denke, es gibt keinen Weg, um die div „schweben“ über Ihren Browser zu machen, wenn dies der Fall wäre, dann könnte die Technologie, um Ihren Bildschirm zu überwinden, so etwas wie Körper style = „margin: -40px“ - sollte diese auf Ihrem Desktop bluten?

Und übrigens, html gestylt ist abnormal, was würden Sie als nächstes tun? Stil, ?? Auf jeden Fall sind sie es, so dass Sie Stile auf alle von ihnen setzen könnte, aber ich glaube nicht, dass viel klug 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

Ich denke, MiffTheFox Ansatz ist die beste, weil seine Lösung die Situation abdeckt, in denen andere divs absolute Positionierung hat. Denken Sie daran, dass die absolute Positionierung Elemente den Fluss gehen, und wenn irgendein Element wird zum Beispiel an der Spitze positioniert: 9000px, Körperhöhe wird 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>