Rendre la superposition Div page entière (pas seulement viewport)?

Question

Rendre la superposition Div page entière (pas seulement viewport)?

Demandé el 17 de Mai, 2010: Quand la question a-t-elle été
38045 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai donc un problème qui me semble assez commun, mais je n'ai pas encore trouvé de solution satisfaisante. Je veux faire une superposition div couvrir toute la page ... pas seulement la fenêtre. Je ne comprends pas pourquoi c'est si difficile à faire ... J'ai essayé de régler les hauteurs de corps, 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 existait une, mais je préférerais de loin simplement utiliser du CSS simple.

Demandé el 17 de Mai, 2010 par Polaris878

Answer 1

4 Réponses

Answer 2

252voto

Jonathan Sampson Points 121800

La fenêtre d'affichage est tout ce qui compte, mais vous souhaiterez probablement que l'ensemble du site reste obscurci même lors du défilement. Pour cela, vous souhaitez utiliser position:fixed au lieu de position:absolute . Fixé maintiendra l'élément statique à l'écran pendant le défilement, 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>

Répondu el 17 de Mai, 2010 par Jonathan Sampson (121800 Points )

Answer 3

17voto

Nate Barr Points 1387

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

Répondu el 14 de Novembre, 2012 par Nate Barr (1387 Points )

Answer 4

1voto

dellm Points 11

Essayez ce code CSS ... il couvrira 100% de la fenêtre de votre navigateur et un autre div ..

 .button
{
    width: 150px;
    padding: 10px;
    background-color: #FF8C00;
    box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2);
    font-weight:bold;
    text-decoration:none;
}
#cover{
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,0.6);
    z-index:5;
    width:100%;
    height:100%;
    display:none;
}
#loginScreen
{
    height:380px;
    width:340px;
    margin:0 auto;
    position:relative;
    z-index:10;
    display:none;
    background: url(login.png) no-repeat;
    border:5px solid #cccccc;
    border-radius:10px;
}
#loginScreen:target, #loginScreen:target + #cover{
    display:block;
    opacity:2;
}
.cancel
{
    display:block;
    position:absolute;
    top:3px;
    right:2px;
    background:rgb(245,245,245);
    color:black;
    height:30px;
    width:35px;
    font-size:30px;
    text-decoration:none;
    text-align:center;
    font-weight:bold;
}

Full Source .... CSS Superposition plein écran

Chales

Répondu el 31 de Mai, 2014 par dellm (11 Points )

Answer 5

1voto

Arve Systad Points 3628

Tout d'abord, je pense que vous avez mal compris ce que la fenêtre est. La fenêtre d'affichage est la zone d'un navigateur utilise pour afficher les pages web, et vous ne pouvez en aucune façon de construire vos sites web pour remplacer cette zone en aucune façon.

Deuxièmement, il semble que la raison que votre overlay-div ne couvre pas la totalité de la fenêtre d'affichage est parce que vous devez supprimer toutes les marges sur le CORPS et HTML.

Essayez de l'ajouter en haut de votre feuille de style - il réinitialise toutes les marges externes et internes sur tous les éléments. Rend le développement plus facile:

* { margin: 0; padding: 0; }

Edit: J'ai juste compris votre question mieux. Position: fixed; sera probablement pour vous, comme Jonathan Sampson ont écrit.

Répondu el 17 de Mai, 2010 par Arve Systad (3628 Points )

Rendre la superposition Div page entière (pas seulement viewport)?

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Rendre la superposition Div page entière (pas seulement viewport)?

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: