Disposition de positionnement absolu avec 100 % de hauteur de conteneur_CSS/HTML

La hauteur du conteneur 100 % est une exigence fréquemment utilisée, qui peut être atteinte par n'importe quel conteneur et ne nécessite pas de relations d'imbrication.

Considérez le corps comme un conteneur et comme l'étiquette supérieure de l'objet interne. Il est essentiel de définir sa hauteur à 100 %.

L'exemple le plus basique

* { margin:0; padding:0; border:0;}
html,body { height:100%;} /* Définissez également le HTML pour la compatibilité FF */
#box_2 { hauteur : 100 % ; arrière-plan : #000;🎜>

Effet de positionnement superposé

#box_1 { position:absolute; top:0; left:0; height:50px; background:#f00;#box_2 { position: absolu ; gauche : 0 ; haut : 0 ; largeur : 100 % ; arrière-plan : #000;
Effet de hauteur relative verticale

#box_1 { position:absolute; top:0; left:0; height:30%; background:#f00; >

#box_2 { position:absolute; gauche : 0 ; haut : 30 % ; largeur : 100 % ; hauteur : 70 % ; arrière-plan : #000;
Effet de largeur relative horizontale

#box_1 { position:absolute; top:0; left:0; height:100%; background:#f00; haut : 0 ; droite : 0 ; largeur : 70 % ; hauteur : 100 % ; arrière-plan : #000;
Cette mise en page ne nécessite pas de float, et il existe de nombreuses variantes :

1, disposition en N colonnes
2, disposition en N lignes

3, disposition en N colonnes plus N lignes croisées

Il convient de noter que lors de la navigation sur la page du conteneur de taille relative dans FF, la taille du conteneur est ajustée en temps réel lorsque la taille de la fenêtre est ajustée, tandis qu'IE ne prendra effet qu'après l'ajustement de la fenêtre.

Testés IE5.0/IE5.5/IE6.0 et FF1.5 réussis