Tornar a sobreposição de Div INTEIRA a página (não apenas a janela de visualização)?

93

Portanto, tenho um problema que considero bastante comum, mas ainda não encontrei uma boa solução para ele. Quero fazer um div de sobreposição cobrir toda a página ... NÃO apenas a janela de visualização. Eu não entendo porque isso é tão difícil de fazer ... Eu tentei definir o corpo, as alturas do html para 100% etc, mas não está funcionando. Aqui está o que tenho até agora:

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

Eu também estaria aberto a uma solução em JavaScript, se houver, mas prefiro usar um CSS simples.

html css Polaris878
fonte
Também pode ler mais aqui: stackoverflow.com/questions/1938536/…
Marco Demaio
Isso pode ser feito de verdade com jQuery?
William Entriken

Respostas:

224

A janela de visualização é tudo o que importa, mas você provavelmente deseja que todo o site permaneça escuro mesmo durante a rolagem. Para isso, você deseja usar em position:fixedvez de position:absolute. Fixo mantém o elemento estático na tela conforme você rola, dando a impressão de que todo o corpo está escurecido.

Exemplo: 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
fonte
3
Posso estar errado, mas o posicionamento fixo funcionará no IE6 ?! Eu sei que provavelmente ninguém se importa mais com o IE6.
Marco Demaio
29
@Marco Não tenho certeza. Para ser honesto, se o suporte para um navegador de 10 anos não for solicitado explicitamente, não vou me preocupar mais :)
Sampson
5
Então, como vocês fazem isso em dispositivos móveis? bradfrostweb.com/blog/mobile/fixed-position
BorisOkunskiy
3
+1 Obrigado! Estendi
kol
o problema que estou tendo com isso (que é usado por muitos plug-ins) é que quando você clica em um <select>elemento no iOS, ele move toda a janela de visualização e basicamente quebra tudo. elementos fixos se movem, coisas que não deveriam rolar
rolam
15 
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
fonte
2
A melhor solução possível lá fora. Basta alternar a classe "sobreposta" para o corpo e aplicar o estilo acima ao corpo com esse className.
Sviatoslav Zalishchuk
3
Explique mais esta resposta. Não entendo o comentário de Sviatoslav.
Lonnie Best
1

Em primeiro lugar, acho que você entendeu mal o que é a janela de visualização. A janela de visualização é a área que um navegador usa para renderizar páginas da web, e você não pode de forma alguma construir seus sites da web para sobrescrever essa área de forma alguma.

Em segundo lugar, parece que o motivo pelo qual sua div de sobreposição não cobrirá toda a janela de visualização é porque você deve remover todas as margens de BODY e HTML.

Tente adicionar isso no topo da sua folha de estilo - ele redefine todas as margens e preenchimentos em todos os elementos. Facilita o desenvolvimento posterior:

* { margin: 0; padding: 0; }

Edit: Acabei de entender melhor sua pergunta. Position: fixed; provavelmente funcionará para você, como Jonathan Sampson escreveu.

Arve Systad
fonte
1
Você não deve remover preenchimento e margens de tudo . Pode ser muito trabalhoso recuperá-los para muitos elementos, como botões e entradas de formulário.
Sampson
1
Na minha opinião, é uma maneira realmente fácil de tratar tudo da mesma forma em todos os navegadores. Pode não se aplicar tanto hoje quanto antes, quando me adaptei ao IE5, mas ainda faço isso como uma das primeiras coisas que escrevo em uma folha de estilo.
Arve Systad
3
@Arve Isso deixa você mais perto, mas é melhor usar uma folha de redefinição testada pelo tempo. Verifique meyerweb.com/eric/tools/css/reset para mais informações - você vai adorar, garanto-lhe :)
Sampson
Eu vi, e simplesmente acho que é muito grande :)
Arve Systad
1
@Arve As redefinições não são tão grandes - tente se recuperar completamente *{}e você verá muito mais :)
Sampson
0

Tive alguns problemas, pois não queria CORRIGIR a sobreposição, pois queria que as informações dentro da sobreposição pudessem ser roladas sobre o texto. Eu usei:

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

É claro que a div no meio precisa de algum conteúdo e provavelmente um fundo cinza transparente, mas tenho certeza de que você entendeu!

Benjamin Vaughan
fonte
-6

Eu olhei para a resposta de Nate Barr acima, da qual você pareceu gostar. Não parece muito diferente do mais simples

html {background-color: grey}
Justin Munce
fonte