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: 0 et right: 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.
