usando apenas CSS, é possível criar uma div que cobre toda a área de conteúdo documento exatamente?

Question

Eu só quero saber se é possível com apenas CSS uso, mas não javascript ao estilo de um DIV que vai cobrir-se toda a área de conteúdo exatamente? (Nota: O conteúdo todo, não apenas a porta de visualização). Parece que não é possível porque o elemento tem alguma margem, e parece que não há nenhuma maneira fácil de estilo da div para incluir que a largura e altura da margem do elemento corpo. Mas, na verdade é possível?

Atualizar : sorry, um requisito é que não podemos definir a margem de para 0 ... (Update2: por exemplo, se precisamos fazê-lo em uma biblioteca e lata 't pedir a todas as pessoas que o usam para definir o corpo para ter margem 0)

Answer 1

Se o margem é definida, então você não poderia usar margens negativas no

para substituir as margens? Eu entendo margens podem variar entre os navegadores. Se o tem uma margem de 10px, em seguida, seu estilo de div assim:

div#mydiv {
margin: -10px;
}

Você usaria o mesmo princípio para preenchimento de substituição (se aplicável).

Answer 2

Claro, eu acho.

margens padrão Reset:

* { margin: 0; padding: 0; }

, em seguida, para

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

fazer:

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

Answer 3

Esta é provavelmente uma solução, mas não vai funcionar no IE ...

div.cover { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; }

Answer 4

Logicamente, isso é impossível. Seu DIV tem que ir dentro do corpo, e não fora.

Ou, dito de outra maneira, você pediu para toda a "área de conteúdo", a ser coberto, mas isso não é realmente o que você quer, você quer o corpo inteiro para ser coberto.

Lazlow tem a melhor sugestão. Talvez definir as margens negativas / estofo para algo grande, então você pode ter certeza que é maior do que o padrão do navegador, em seguida, ter um div interna com os mesmos valores de margem / preenchimento único aspecto positivo?

Answer 5

Sim. você apenas definir o preenchimento e margem da tag corpo a 0, em seguida, definir o preenchimento e margem da tag div para zero.

Answer 6

o que sobre isso?

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

Answer 7

Gostei resposta de Ambrose. O corpo é recipiente final para seu HTML. Eu não vi quaisquer margens no corpo com a Mozilla, Chrome, IE, ou Opera - versões atuais. Para prová-lo: estilo
body {background-color: amarelo;} / * e dar uma olhada. * /

Em qualquer caso, é sempre uma boa prática para normalizar os navegadores de ajuste para a margem, estofamento, etc a zero! como Dmitri Farkov acima

Answer 8

Eu acho que não há nenhuma maneira de fazer o div "flutuar" sobre o seu navegador, se seria assim, então a tecnologia poderia superar sua tela, algo como estilo de corpo = "margin: -40px" - deve este sangramento em seu desktop?

E, a propósito, html com estilo é anormal, o que você faria em seguida? estilo , ?? Em qualquer caso, eles estão lá para que você possa definir estilos em todos eles, mas eu não acho que seria muito inteligente.

Eu não sei se isso poderia ajudar:

<div style="margin:-100%">

Mas eu duvido que isso pode superar a janela do navegador ...

Answer 9

Eu acho que a abordagem de MiffTheFox é o melhor, porque a sua solução abrange a situação em outros divs tem posicionamento absoluto. Lembrar que o posicionamento absoluto elementos sair o fluxo, e se qualquer elemento está posicionado por exemplo na parte superior:. 9000px, a altura do corpo não será> 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>