Une barre latérale collante de taille dynamique avec HTML et CSS

La création d'une barre latérale collante qui s'adapte à la taille de la fenêtre est étonnamment simple en utilisant HTML et CSS. Tirer parti de position: sticky et réglage d'un décalage directionnel (comme top: 0 ) permet une implémentation facile de fonctionnalités telles que les menus de saut-ancure ou les en-têtes de section. Pour des techniques de positionnement collantes plus avancées, explorez des ressources comme CSS-Tricks.

Cependant, des défis surviennent lorsqu'ils traitent du contenu de taille dynamiquement dans l'élément collant. Cela peut entraîner le contenu en dessous de la fenêtre, un problème commun lorsque la hauteur de la barre latérale dépasse l'espace d'écran disponible.

J'ai récemment rencontré ce problème lors de la conception d'une disposition de bureau avec une zone de contenu principale et une barre latérale contenant des éléments d'action et des filtres. La barre latérale devait rester fixée à la fenêtre pendant la diffusion. Bien que le style initial soit simple, la hauteur variable du contenu de la barre latérale a présenté un défi. L'utilisation max-height et overflow-y: auto a bien fonctionné sur les écrans plus grands, mais les fenêtres plus petites ont fait déborder de la barre latérale.

Résoudre le problème de la hauteur dynamique

Mon approche initiale a envisagé d'utiliser des requêtes multimédias pour éliminer le positionnement collant sur des écrans plus petits, ce qui rend la barre latérale par rapport à son conteneur. Cependant, la hauteur dynamique de la barre latérale a rendu impossible la recherche d'un point d'arrêt approprié pour la question médiatique. Une solution JavaScript pour ajuster dynamiquement la hauteur en fonction de la taille de la fenêtre semblait trop complexe et sujette aux problèmes de redimensionnement des fenêtres.

Une solution plus élégante basée sur CSS s'est avérée efficace.

Implémentation de la solution

L'élément principal a utilisé Flexbox pour la mise en page, en attribuant un flex-basis fixe à la barre latérale pour les largeurs de bureau et en permettant à l'élément de l'article de remplir l'espace restant. La technique Flexbox Holy Albatross a assuré un empilement approprié sur des fenêtres plus petites sans requêtes médiatiques. align-self: start sur la barre latérale empêché sa hauteur de s'étirer avec l'article principal.

La clé CSS pour la barre latérale collante:

 .sidebar {
  --offset: var (- espace);
  / * ... * /
  Position: collante;
  en haut: var (- décalage);
}

Cela établit le comportement collant avec un décalage supérieur contrôlé par une propriété personnalisée CSS ( --offset ). Cette variable est réutilisée pour un espacement cohérent.

La structure de la composante latérale:

 .Component {
  Affichage: grille;
  Grid-Template Rows: Auto 1FR Auto;
}

.Component .Content {
  max-height: 500px;
  débordement-y: auto;
}

Cela utilise la grille CSS pour une disposition flexible. La max-height de la section de contenu empêche une croissance excessive et overflow-y: auto permet de faire défiler si nécessaire. Surtout, dans le contexte de la barre latérale:

 .sidebar .Component {
  max-height: calc (100vh - var (- offset) * 2);
}

Cela calcule dynamiquement la max-height en fonction de la hauteur de la fenêtre et du décalage, empêchant le débordement.

Cette approche crée une barre latérale collante réactive qui s'adapte à différentes tailles de fenêtre. Bien que conviennent pour le bureau, d'autres améliorations peuvent être nécessaires pour les petits appareils, comme un bouton "Sauter dans la barre latérale" ou une bascule pour masquer / afficher la barre latérale. Les tests des utilisateurs guideront d'autres itérations.

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!