position absolute sur toute la largeur

Une petite astuce qui n’est pas très connue : savez-vous qu’il est possible d’étirer un élément en position absolute (ou fixed) sur toute la largeur ou hauteur de son référent ?

Ben oui, il suffit de lui appliquer un width 100% ou un height 100%.

Certes. Mais je vous ai déjà dit tout le mal que je pensais de width 100% ? En effet, _width _n’est que la composante de contenu, donc que va-t-il se passer si vous souhaitez faire bénéficier votre élément de _paddings _ou de _borders _?

Ben ça va “dépasser”, puisque sa largeur totale sera de “100% + les paddings + les borders”, et là c’est le drame.

Eh bien on peut s’en sortir assez facilement avec une technique parfaitement valide et standard (bien que non reconnue par IE6) :** affecter des coordonnées contraires à l’élément.**

Par exemple : avec des coordonnées à left: 0etright: 0, l’élément occupera toute la largeur et vous pourrez sans souci lui appliquer des padding. La méthode fonctionne aussi pour top _et _bottom.