Une technique de pied de page collante intelligente

En ce qui concerne le "pied de page collant", la plupart des gens pensent de nos jours à position: sticky : dans le contexte de l'élément parent défilant, l'élément de page de page est fixé à l'écran.

Mais ce n'est pas l'objectif de cet article. Le concept de «pied de page collant» est apparu plus tôt que position: sticky , et sa signification était légèrement différente. L'idée est: même si le contenu de la page ne suffit pas pour le pousser vers le bas, il s'en tiendra au bas de l'écran. Mais s'il y a suffisamment de contenu, il sera heureux d'être poussé ci-dessous.

Nous avons introduit cinq méthodes de mise en œuvre dans le passé, y compris certaines technologies modernes telles que calc() , Flexbox et CSS Grid.

Maintenant, la sixième méthode est sur scène! Lecteur Sílvio Rosa a proposé la méthode suivante:

(Il est préférable de voir sur un écran de bureau de taille moyenne, car le pied de page collant est principalement le plus efficace à cette taille d'écran.)

Le code est très concis:

 html, corps {hauteur: 100%;}

corps> pied de page {
  Position: collante;
  En haut: 100 VH;
}

Une chose que j'apprécie, c'est que cela ne nécessite pas d'emballages supplémentaires spéciaux au contenu non-foot.

Il est également légèrement déroutant. Quand je vois top: 100vh; ; Mais c'est exactement l'intelligence. Quelle que soit la taille du pied de page (pas de numéros magiques requis), il le fait, puis le positionnement collant "suce-le" pour adhérer au bord inférieur. Mais il ne chevauche jamais le contenu, il est donc heureux d'être poussé sous le contenu, qui est le principe principal du modèle de pied de page collant.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!