Une technique de mise en page courante, communément appelée pied de page collant, était difficile à réaliser dans le passé avec les anciens CSS, mais c’est maintenant comment créer un pied de page collant avec CSS. Un pied de page collant est un pied de page qui reste fixe et visible en bas de l’écran, quelle que soit la distance à laquelle l’utilisateur fait défiler la page. En théorie, la position du pied de page collant ne devrait jamais changer et devrait toujours apparaître sur l’écran de l’utilisateur.
Créer un pied de page collant à l’aide de CSS est en fait assez simple, il suffit généralement de définir la propriété de position du pied de page sur fixe. Jetez un œil au code ci-dessous pour voir comment cela se fait. Dans cet exemple, l’ID du pied de page est #sticky-footer.
Un pied de page collant est le pied de page de la page Web, qui colle au bas de la fenêtre d’affichage lorsque le contenu est plus court que la fenêtre d’affichage hauteur. Cela nous permet de naviguer facilement sur un site Web et peut être créé avec CSS.
Créez des éléments HTML
avec les noms de classe suivants :”content”et”push”. Ajoutez un élément avec le nom de classe”footer”.
Ajouter CSS
Spécifiez les propriétés de hauteur et de marge pour les éléments et. Ajoutez les propriétés padding, min-height et margin aux classes « content ». Définissez la propriété height égale à la marge négative.
Qu’est-ce qu’un pied de page collant ?
Un pied de page correspond aux informations figurant au bas d’une page Web. Sur un site Web traditionnel, les visiteurs feraient défiler vers le bas pour voir les informations dans le pied de page au bas de la page Web. Mais avec un pied de page collant (également appelé pied de page fixe), ces informations apparaissent toujours en bas du navigateur Web du visiteur, même si le visiteur fait défiler vers le bas. Vous n’avez pas besoin d’aller au bas de la page pour le voir.
Par exemple, l’équipe du compteur de réservation a constaté que l’affichage bien en vue du numéro de téléphone du centre de contact sur le site Web augmentait les commandes, alors ils se sont assurés il était affiché dans un pied de page collant pour les visiteurs mobiles.
L’image ci-dessous est tirée de l’article”Étude de cas sur l’optimisation du taux de conversion : comment un site de voyage a doublé son taux de conversion de site Web en un an”, qui indique où les numéros de téléphone sont répertoriés sur les sites mobiles. Le numéro de téléphone au bas de la page est répertorié dans le pied de page collant.
FAQ
Qu’est-ce que le CSS du pied de page collant ?
Un motif de pied de page collant en est un où le pied de page de votre page”colle”au bas de la fenêtre d’affichage dans les cas où le contenu est plus court que la hauteur de la fenêtre d’affichage.
Comment puis-je faire en sorte que le pied de page touche le bas de la page en CSS ?
Vous pouvez utiliser flexbox pour vous assurer que le pied de page est toujours en bas de la page. Pour ce faire, définissez l’élément body min-height : 100vh , display : flex et flex-direction : column.
Le pied de page collant est-il identique au pied de page fixe ?
Sur un site Web traditionnel, un visiteur ferait défiler vers le bas pour voir les informations au bas d’une page Web dans le pied de page. Cependant, avec un pied de page collant (parfois appelé pied de page fixe), cette information est toujours présente au bas du navigateur Web du visiteur lorsque celui-ci fait défiler vers le bas.