Make Div-Overlay GESAMT-Seite (nicht nur Ansichtsfenster)?

Also ich habe ein problem, dass ich denke, dass ist durchaus üblich, aber ich habe noch eine gute Lösung zu finden. Ich möchte ein overlay-div Abdeckung der GESAMTEN Seite... NICHT nur den viewport. Ich verstehe nicht, warum dies so schwer zu tun... ich habe versucht Einstellung der Körper -, html-Höhen auf 100% etc, aber das funktioniert nicht. Hier ist was ich habe, so weit:

<html>
<head>
    <style type="text/css">
    .OverLay { position: absolute; z-index: 3; opacity: 0.5; filter: alpha(opacity = 50); top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: Black; color: White;}
    body { height: 100%; }
    html { height: 100%; }
    </style>
</head>

<body>
    <div style="height: 100%; width: 100%; position: relative;">
        <div style="height: 100px; width: 300px; background-color: Red;">
        </div>
        <div style="height: 230px; width: 9000px; background-color: Green;">
        </div>
        <div style="height: 900px; width: 200px; background-color: Blue;"></div>
        <div class="OverLay">TestTest!</div>
    </div>


    </body>
</html>

Ich würde auch offen sein für eine Lösung in JavaScript, wenn eine vorhanden ist, aber ich würde viel lieber nur mit einigen einfachen CSS-Dateien.

InformationsquelleAutor der Frage Polaris878 | 2010-05-17

css html

188

Viewport ist alles, was zählt, aber Sie wahrscheinlich wollen, um die gesamte website zu bleiben, verdunkelte sich auch beim scrollen. Für diese, die Sie verwenden möchten position:fixed statt position:absolute. Fest halten Sie das element statischen auf dem Bildschirm, wie Sie navigieren, was den Eindruck erweckt, dass der ganze Körper verdunkelt ist.

Beispiel: http://jsbin.com/okabo3/edit
```
div.fadeMe {
  opacity:    0.5; 
  background: #000; 
  width:      100%;
  height:     100%; 
  z-index:    10;
  top:        0; 
  left:       0; 
  position:   fixed; 
}
```
```
<body>
  <div class="fadeMe"></div>
  <p>A bunch of content here...</p>
</body>
```
InformationsquelleAutor der Antwort Sampson

body:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}

InformationsquelleAutor der Antwort Nate Barr

1

Zunächst, ich glaube, du hast missverstanden, was der viewport ist. Der viewport ist der Bereich ein browser verwendet zum Rendern von Webseiten, und Sie können nicht in irgendeiner Weise bauen Ihre web-Seiten zu überschreiben, diesem Bereich in irgendeiner Weise.

Zweitens, es scheint, dass der Grund dafür, dass das overlay-div nicht decken die gesamte viewport - ist, weil Sie müssen entfernen Sie alle Ränder auf BODY und HTML.

Versuchen Sie, diese an der Spitze der stylesheet - es setzt alle Ränder und Leerstellen auf alle Elemente. Macht weiter Entwicklung einfacher:
```
* { margin: 0; padding: 0; }
```
Bearbeiten:
Ich habe gerade deine Frage verstanden besser. Position: fixed; wird wahrscheinlich für Sie arbeiten, als Jonathan Sampson geschrieben haben.

InformationsquelleAutor der Antwort Arve Systad
-6

Ich sah Nate Barr ' s Antwort oben, was Sie zu mögen schien. Es scheint nicht sehr Verschieden von den einfacheren
```
html {background-color: grey}
```
InformationsquelleAutor der Antwort Justin Munce

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.