Admin/Dev

Voici une astuce en HTML et CSS très simple pour créer un bloc div à largeur et hauteur 100%.

En indiquant une position fixée à un bloc div, ce même bloc perd certaines de ses propriétés. En particulier, il perd sa largeur de 100% (définie par l'attribut display:block par défaut sur un div). Mais il est possible de redéfinir cette propriété, très rapidement avec un simple width:100%.

Imaginons un bloc dont la classe est "monBloc", la classe CSS serait

.monBloc {position:fixed; left:0; width:100%;}

Pour définir une hauteur de 100%, il faut utiliser les spécifications d'un bloc utilisant une position fixée. Pour cela il suffit de le fixer en haut de la fenêtre

.monBloc {position:fixed; left:0; width:100%; top:0;}

Puis de le fixer, de la même manière, en bas de la fenêtre

.monBloc {position:fixed; left:0; width:100%; top:0; bottom:0;}

Le bloc s'étirera sur toute la hauteur.

A noter, qu'à la place de width:100%, on pourrait demander au bloc de s'étirer en largeur, comme nous l'avons fais pour la hauteur.

.monBloc {position:fixed; left:0; right:0; top:0; bottom:0;}

Il est ensuite très facile mettre en place un bord tournant si on le souhaite, par exemple de 50 pixels

.monBloc {position:fixed; left:50px; right:50px; top:50px; bottom:50px;}

Il est aussi possible de le définir en pourcentage, cependant, il ne sera pas possible d'obtenir une marge identique en hauteur et en largeur.

.monBloc {position:fixed; left:10%; right:10%; top:10%; bottom:10%;}