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 s'il est possible de n'utiliser CSS mais pas javascript pour le style d'un DIV qui couvrira le secteur entier contenu exactement? (Note: le contenu, pas seulement la fenêtre). Il ne semble pas possible parce que l'élément a une certaine marge, et il semble que il n'y a pas moyen facile de style de la div d'inclure cette largeur de la marge et la hauteur de l'élément de corps. Mais en fait, est-il possible?

Mise à jour : désolé, une exigence est que nous ne pouvons pas définir la marge de à 0 ... (Update2: dire, si nous devons le faire dans une bibliothèque et peut « t demander à toutes les personnes qui l'utilisent pour définir le corps d'avoir la marge 0)

Answer 1

Si la balise marge est définie, vous ne pourriez pas utiliser des marges négatives sur les

pour remplacer le marges? Je comprends marges peuvent varier entre les navigateurs. Si le a une marge de 10px, puis le style de votre div comme ceci:

div#mydiv {
margin: -10px;
}

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

Answer 2

Bien sûr, je pense.

Réinitialiser les marges par défaut:

* { margin: 0; padding: 0; }

alors pour

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

faire:

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

Answer 3

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 4

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

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

Lazlow a la meilleure suggestion. Peut-être fixer les marges négatives / rembourrage à quelque chose de grand, vous pouvez donc être sûr qu'il est plus grand que la valeur par défaut du navigateur, ont alors une div intérieure avec la même marge / valeurs de remplissage seul point positif?

Answer 5

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

Answer 6

Qu'en est-ce?

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

Answer 7

J'ai bien aimé la réponse de Ambrose. Le corps est conteneur ultime pour votre HTML. Je ne l'ai pas vu de marges dans le corps avec Mozilla, Chrome, IE ou Opera - les versions actuelles. Pour le prouver: le style
body {background-color: jaune;} / * et jeter un coup d'oeil. * /

dans tous les cas, il est toujours une bonne pratique pour normaliser les navigateurs de réglage pour margin, padding, etc à zéro! comme Dmitri Farkov ci-dessus

Answer 8

Je pense qu'il n'y a aucun moyen de faire la div « flotter » au-dessus de votre navigateur, si serait le cas, alors la technologie pourrait permettre de surmonter votre écran, quelque chose comme le style body = « margin: -40px » - si cela saigne sur votre bureau?

Et par ailleurs, de style html est anormal, que feriez-vous faire? le style, ?? Dans tous les cas, ils sont là pour que vous puissiez définir des styles sur tous, mais je ne pense pas que ce serait beaucoup plus intelligent.

Je ne sais pas si cela pourrait aider:

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

Mais je doute que 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 dans laquelle d'autres divs a un positionnement absolu. Rappelez-vous que les éléments de positionnement absolu vont l'écoulement, 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>