Rendre la page complète de superposition Div (pas seulement la fenêtre)?

94

J'ai donc un problème qui, je pense, est assez courant, mais je n'ai pas encore trouvé de bonne solution. Je veux faire une superposition div couvrir la page ENTIER ... PAS seulement la fenêtre. Je ne comprends pas pourquoi c'est si difficile à faire ... J'ai essayé de régler le corps, les hauteurs html à 100%, etc. mais cela ne fonctionne pas. Voici ce que j'ai jusqu'à présent:

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

Je serais également ouvert à une solution en JavaScript s'il en existe une, mais je préfère de loin utiliser un simple CSS.

html css Polaris878
la source
Pour en savoir plus, cliquez ici: stackoverflow.com/questions/1938536/…
Marco Demaio
Cela peut-il être fait pour de vrai avec jQuery?
William Entriken

Réponses:

225

La fenêtre d'affichage est tout ce qui compte, mais vous souhaitez probablement que l'ensemble du site Web reste sombre même pendant le défilement. Pour cela, vous souhaitez utiliser à la position:fixedplace de position:absolute. Fixed gardera l'élément statique sur l'écran pendant que vous faites défiler, donnant l'impression que tout le corps est assombri.

Exemple: 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>
Sampson
la source
3
Je me trompe peut-être, mais est-ce que la positionner le travail fixe dans IE6?! Je sais que personne ne se soucie probablement plus d'IE6.
Marco Demaio
29
@Marco Pas sûr. Pour être honnête, si le support pour un navigateur de 10 ans n'est pas explicitement demandé, je ne vais plus m'embêter :)
Sampson
5
Alors, comment faites-vous sur les appareils mobiles? bradfrostweb.com/blog/mobile/fixed-position
BorisOkunskiy
3
+1 Merci! J'ai étendu votre exemple en ajoutant une fenêtre contextuelle au-dessus de la superposition: jsbin.com/okabo3/740
kol
le problème que j'ai avec cela (qui est utilisé par de nombreux plug-ins) est que lorsque vous cliquez sur un <select>élément dans iOS, cela déplace toute la fenêtre et tout casse. les éléments fixes bougent, les choses qui ne doivent pas défiler défilent, etc.
billynoah
16 
body:before {
    content: " ";
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
}
Nate Barr
la source
2
La meilleure solution possible. Il vous suffit de basculer la classe "superposée" pour le corps et d'appliquer le style ci-dessus au corps avec ce nom de classe.
Sviatoslav Zalishchuk
3
Veuillez expliquer cette réponse plus en détail. Je ne comprends pas le commentaire de Sviatoslav.
Lonnie Best
1

Tout d'abord, je pense que vous avez mal compris ce qu'est la fenêtre d'affichage. La fenêtre d'affichage est la zone qu'un navigateur utilise pour rendre les pages Web, et vous ne pouvez en aucun cas créer vos sites Web pour remplacer cette zone de quelque manière que ce soit.

Deuxièmement, il semble que la raison pour laquelle votre overlay-div ne couvrira pas la totalité de la fenêtre est que vous devez supprimer toutes les marges sur BODY et HTML.

Essayez de l'ajouter en haut de votre feuille de style - cela réinitialise toutes les marges et les rembourrages sur tous les éléments. Facilite le développement ultérieur:

* { margin: 0; padding: 0; }

Edit: Je viens de mieux comprendre votre question. Position: fixed; fonctionnera probablement pour vous, comme Jonathan Sampson l'a écrit.

Arve Systad
la source
1
Vous ne devriez pas supprimer le remplissage et les marges de tout . Il pourrait être très laborieux de les récupérer pour de nombreux éléments tels que les boutons et les entrées de formulaire.
Sampson
1
À mon avis, c'est juste un moyen très simple de tout traiter de la même manière entre les navigateurs. Peut-être ne pas s'appliquer autant aujourd'hui qu'auparavant lors de l'adaptation à IE5, mais je le fais toujours comme l'une des premières choses que j'écris dans une feuille de style.
Arve Systad
3
@Arve Cela vous rapproche, mais il est préférable d'utiliser une feuille de réinitialisation éprouvée par le temps. Consultez meyerweb.com/eric/tools/css/reset pour plus d'informations - vous allez adorer, je vous assure :)
Sampson
Je l'ai vu, et je pense simplement que c'est trop gros :)
Arve Systad
1
@Arve Les réinitialisations ne sont pas si importantes - essayez de récupérer complètement *{}et vous en verrez beaucoup plus :)
Sampson
0

J'ai eu un peu de mal car je ne voulais pas FIXER la superposition en place car je voulais que les informations à l'intérieur de la superposition puissent faire défiler le texte. J'ai utilisé:

<html style="height=100%">
   <body style="position:relative">
      <div id="my-awesome-overlay" 
           style="position:absolute; 
                  height:100%; 
                  width:100%; 
                  display: block">
           [epic content here]
      </div>
   </body>
</html>

Bien sûr, le div au milieu a besoin de contenu et probablement d'un fond gris transparent, mais je suis sûr que vous comprenez l'essentiel!

Benjamin Vaughan
la source
-6

J'ai regardé la réponse de Nate Barr ci-dessus, que vous avez semblé aimer. Cela ne semble pas très différent du plus simple

html {background-color: grey}
Justin Munce
la source