Comment utiliser la grille CSS pour les en-têtes et pieds de page collants

La grille CSS simplifie considérablement la disposition du Web. Bien qu'il y ait une courbe d'apprentissage, sa nature intuitive le rend agréable à utiliser, en particulier pour gérer les en-têtes et les pieds de page. Ce tutoriel montre la création de pieds de page fixe et collante à l'aide de la grille CSS. "The New CSS Layout" de Rachel Andrew est fortement recommandée pour une plongée plus profonde dans la grille et le flexion.

Aperçu du projet

Nous allons construire une disposition HTML classique avec un en-tête, un contenu principal et un pied de page. Nous implémenterons deux variations de pied de page: un pied de page fixe qui reste en bas de la fenêtre, quelle que soit la longueur du contenu, et un pied de page collant traditionnel qui adhère au fond mais est poussé par un contenu plus long. La zone de contenu principale sera adaptable, couvrant la largeur complète de la fenêtre ou centrage dans une largeur définie.

Les pieds fixes, bien que moins courants que les pieds de page collants, sont utilisés par des sites comme Charles Schwab. Leur mise en œuvre implique souvent des tailles et des paddages à code dur. Notre approche évite ces limites, en tirant parti de la flexibilité de CSS Grid.

Avant de continuer, examinez le pied de page fixe de la page d'accueil de Charles Schwab. L'inspection de son code dans Devtools révèle une hauteur et un positionnement codés en dur.

Réalisons un effet similaire sans ces contraintes.

Styles initiaux

Nous commencerons par une interface utilisateur minimale, l'améliorant progressivement avec la grille CSS. Une boîte de codes et des itérations ultérieures) fournit des exemples interactifs.

Tout d'abord, nous nous assurons que la pleine hauteur de la fenêtre est utilisée:

 corps {
  marge: 0; / * empêche les barres de défilement * /
}

#App {
  Hauteur: 100VH;
}

Ensuite, nous définissons les sections d'en-tête, principale et de pied de page et leur structure de grille. Cette structure initiale ne fonctionnera pas encore comme prévu; Il sert de base:

 corps {
  marge: 0;
}

#App {
  Hauteur: 100VH;

  / * Paramètres de conteneur de grille * /
  Affichage: grille;
  grille-template-colonnes: 1FR;
  Grid-Template Rows: Auto 1FR Auto;
  Grid-Template-Areas:
    'En-tête'
    'principal'
    «pied de page»;
}

#App> En-tête {
  Grid-Area: En-tête;
}

#App> Main {
  Grid-Area: Main;
  rembourrage: 15px 5px 10px 5px;
}

#App> pied de page {
  Grid-Area: pied de page;
}

Cela crée une disposition à une seule colonne. 1fr signifie «prendre l'espace restant», entraînant des colonnes pleine largeur. Les lignes sont dimensionnées à l'aide de auto (pour l'en-tête et le pied de page) et 1fr (pour le contenu principal pour remplir l'espace restant). Aucune hauteur codée dure n'est nécessaire.

Intégration de contenu

La boîte de codes et la boîte et la boîte utilisent React à des fins de démonstration, mais les principes de la grille CSS restent indépendants du cadre. Les composants d'en-tête, principaux et de pied de page rendent les éléments HTML respectifs. Les sections de facturation et de paramètres fournissent un échantillon de contenu, démontrant l'adaptabilité de la disposition.

La disposition initiale montre une section "Billing" fonctionnelle, mais "Paramètres" pousse le pied de page hors écran. Le défilement affecte toute la page, ce qui fait disparaître l'en-tête. Adressez-nous.

En-tête fixe et pied de page

La hauteur 100vh et le dimensionnement des lignes auto / 1fr provoquent initialement des problèmes lorsque le contenu dépasse la fenêtre. Ajout overflow: auto à la<main></main> L'élément permet de faire défiler dans la zone de contenu principale, en gardant la tête et le pied de page: Fixé:

 #App> Main {
  Grid-Area: Main;
  débordement: auto;
  rembourrage: 15px 5px 10px 5px;
}

Cette démo mise à jour résout les problèmes de défilement et de visibilité.

Largeur de section principale réglable

Pour centrer le contenu principal dans une largeur de 600px ou lui permettre d'étendre la fenêtre complète, nous nidons une grille à l'intérieur<main></main> . Cela utilise trois colonnes ( 1fr 600px 1fr ), centrant efficacement la section 600px.

 #App> Main {
  Affichage: grille;
  Grid-Template Rows: 1FR;
  Grid-Template-Colonnes: 1FR 600PX 1FR;
}

Le contenu est positionné à l'aide de coordonnées de la grille. Une classe .full permet au contenu de retirer toute la largeur:

 #App> Section {
  Arie de grille: 1/2/1/3;
}

#App> section.full {
  Grid-Area: 1/1/1/4;
}

Remarquez l'utilisation des lignes de grille (quatre lignes pour trois colonnes). Le rétrécissement de la fenêtre révèle un problème de troncature avec la largeur fixe de 600px. minmax(0, 600px) résout cela, permettant à la largeur de s'ajuster jusqu'à 600px:

 principal {
  Affichage: grille;
  Grid-Template Rows: 1FR;
  grille-template-colonnes: 1fr Minmax (0, 600px) 1fr;
}

La démo finale présente ce comportement réactif.

Pied de page collant traditionnel

Pour créer un pied de page collant traditionnel, nous modifions la structure de la grille. Le<main></main> L'élément contient désormais le pied de page dans sa grille:

<div>
  <header></header>
  <main>
    <section></section>
    <footer></footer>
  </main>
</div>

La grille #app est mise à jour pour avoir deux lignes:

 #App {
  / * Identique qu'avant * /
  grille-template-colonnes: 1FR;
  Grid-Template Rows: Auto 1FR;
  Grid-Template-Areas:
    'En-tête'
    'principal';
}

Le<main></main> La grille est ajustée pour inclure le pied de page:

 #App> Main {
  Affichage: grille;
  Grid-Template Rows: 1FR Auto;
  grille-template-colonnes: 1fr Minmax (0, 600px) 1fr;
}

Positionnement de pied de page dans cette grille:

 #App> pied de page {
  Arie de grille: 2/1/3/4;
}

Cette configuration permet au pied de page d'être poussé par le contenu à l'intérieur<main></main> , Création de l'effet de pied de page collant souhaité. Des ajustements de rembourrage mineurs ont été effectués pour assurer un bon alignement. La démo finale illustre ce comportement. Un style supplémentaire a été appliqué à l'élément de section pour permettre le défilement horizontal dans la zone de contenu tout en maintenant la disposition verticale.

Conclusion

Bien que les techniques démontrées soient réalisables sans grille CSS, Grid fournit une solution unifiée et élégante. Sa flexibilité et sa facilité d'utilisation, comme démontré par la transition simple d'un pied de page fixe à un pied collant, en font un outil puissant pour des dispositions complexes. Les exemples présentés sont relativement simples, présentant le potentiel du réseau CSS pour des projets plus ambitieux.

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!