en utilisant CSS seulement, est-il possible de créer un div qui couvre toute la zone de contenu du document exactement?

Question

Je me demande simplement s'il est possible de n'utiliser que CSS mais pas javascript pour styliser un DIV qui recouvrira toute la zone de contenu exactement? (note: tout le contenu, pas seulement la fenêtre d'affichage). Cela ne semble pas possible car l'élément body> < a une certaine marge, et il semble qu'il n'y ait pas de moyen facile de donner au div la largeur et la hauteur de l'élément body. Mais en réalité est-ce possible?

Mise à jour: désolé, une exigence est que nous ne pouvons pas définir la marge de < corps> à 0 ... (Update2: dire, si nous devons en faire une bibliothèque et ne peut pas demander à tous les gens qui l'utilisent pour mettre le corps à avoir la marge 0)

Answer 1

Si la marge de corps < > est défini, vous ne pourriez pas utiliser des marges négatives sur la <div> pour remplacer le <corps> marges? Je comprends <corps> les marges peuvent varier entre les navigateurs. Si le corps < > a une marge de 10px, puis le style de votre div comme ceci:

div#mydiv { 
margin: -10px; 
} 

Vous devriez utiliser le même principe pour remplacer le rembourrage (le cas échéant).

Answer 2

Bien sûr, je pense.

marges par défaut Reset:

* { margin: 0; padding: 0; } 

puis pour

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

do:

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

Answer 3

Oui. vous venez de définir le remplissage et la marge de l'étiquette de corps à 0, puis vous définissez le remplissage et la marge de l'étiquette div à zéro.

Answer 4

Et à ce sujet?

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

Answer 5

Ceci est probablement une solution, mais il ne fonctionnera pas dans IE ...

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

Answer 6

Logiquement, c'est impossible. Votre DIV doit aller à l'intérieur du corps, pas à l'extérieur.

Ou, pour le dire autrement, vous avez demandé à ce que toute la «zone de contenu» soit couverte, mais ce n'est pas vraiment ce que vous voulez, vous voulez que tout le corps soit couvert.

Lazlow a la meilleure suggestion. Peut-être définir les marges/bourrelets négatifs à quelque chose de grand, donc vous pouvez être sûr qu'il est plus grand que le navigateur par défaut, alors avoir un div interne avec les mêmes valeurs de marge/remplissage que positif?

Answer 7

A aimé la réponse d'Ambrose. Le corps est le conteneur ultime pour votre HTML. Je n'ai pas vu de marges dans le corps avec Mozilla, Chrome, IE ou Opera - les versions actuelles. Pour le prouver: style
body {background-color: yellow;}/* et jetez un oeil. Dans tous les cas, c'est toujours une bonne pratique de normaliser les paramètres du navigateur pour la marge, le remplissage, etc à zéro! comme Dmitri Farkov ci-dessus

Answer 8

Je pense qu'il n'y a aucun moyen de faire le div "float" sur votre navigateur, si c'était le cas, alors la technologie pourrait surmonter votre écran, quelque chose comme body style = "margin: -40px" - devrait cela saigne sur votre bureau?

Et en passant, le style html est anormal, que feriez-vous ensuite? style, ?? En tout cas, ils sont là pour que vous puissiez définir des styles sur chacun d'eux, mais je ne pense pas que ce serait beaucoup intelligent.

Je ne sais pas si cela pourrait aider:

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

Mais je doute cela peut surmonter la fenêtre du navigateur ...

Answer 9

Je pense que l'approche de MiffTheFox est la meilleure, parce que sa solution couvre la situation où les autres divs ont un positionnement absolu. Rappelez-vous que les éléments de positionnement absolus se détachent du flux, et si un élément est positionné par exemple en haut: 9000px, la hauteur du corps ne sera pas> 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>