[Résolu] GRID pour remplacer position: fixed

Bonjour,

Encore une chose qui m'échappe avec GRID...

Voir le codepen.

body {display: grid; grid-template-rows: minmax(0, 1fr) auto; row-gap: 20px}

Dans mon esprit : le premier élément (main) devrait occuper toute la place disponible, moins la hauteur auto du deuxième élément (footer).

Ce serait un équivalent à body en display block avec footer en position fixed

footer {position: fixed; bottom: 0; left: 0; right: 0; z-index: 1}

Je vois quelques avantages à employer GRID au lieu de position: fixed.
Plus solide avec les navigateurs pour MOBILE qui n'aiment pas position fixed.
Facile de créer une marge au dessus du footer (avec row-gap).

Voyez-vous une solution ?

Merci d'avance.
Modifié par boteha_2 (28 Jul 2024 - 14:32)

Bonjour,

Pour jeter le pied à terre, il te manque une hauteur à body dans ton codepen.

body {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  row-gap: 20px;
  min-height:100vh;
min-height:100dvh;/*mobile*/
  margin:0;
}

A propos de dvh, voir https://dev.to/frehner/css-vh-dvh-lvh-svh-and-vw-units-27k4#dynamic-viewport-units - https://dev.to/roushannn/understanding-the-different-css-viewport-units-dvh-svh-lvh-9eo , je n'ai rien trouvé de francophone, mais en gros ce sont des dimension dynamiques typiques dans un portable .

Si tu veut garder le pied visible, il y a position:sticky; bottom:0; à ajouter https://codepen.io/gc-nomade/pen/NWZbEbo

Est ce que cela t'éclaire un peu ?
Modifié par gcyrillus (28 Jul 2024 - 18:14)

Bonjour gcyrillus,

Merci de ton suivi.

J'ai chargé ton code sur le codepen.

Ton code vise à chasser le footer en bas de page et en ce sens il fonctionne.

Mais une fois de plus j'ai dû mal m'exprimer car il y a un autre objectif en plus ce celui-là.

Le footer doit être toujours visible quelle que soit la hauteur de la fenêtre et donc dans le cas ou le texte de main est plus haut que la fenêtre.

Position fixed le fait, on est d'accord.

Je reviens à ce code :

body {display: grid; grid-template-rows: minmax(0, 1fr) auto; row-gap: 20px}

Dans non esprit 1fr = la hauteur disponible dans la fenêtre.
Mais je me trompe, si le texte déborde le grid-item prend la hauteur du texte.

J'espère que tu comprends mon problème.
Vois-tu une solution simple ?
S'il faut faire des acrobaties j'aime autant garder position : fixed.

Position sticky est une variante de Position fixed, ce n'est pas la solution cherchée.

Tu passes de min-height à height, cela marche comme espéré, dans ton codepen et le mien mis à jour.

Si je comprends : tu donnes à body la hauteur de la fenêtre, donc 1fr devient cette hauteur diminuée de celle du footer.
C'est malin.

gcyrillus a écrit :
Si tu veut partir de body en 100% de hauteur du viewport, ne fait pas : margin:10px sans les retirer de la hauteur, fait plutôt quelque chose comme : margin:0;padding:10px;box-sizing:border-box; pour avoir ta marge de 10px incluses dans le calcul de la hauteur . ce n'est pas spécifique aux grilles

Bon à savoir, c'est noté.

gcyrillus a écrit :
A propos de dvh, voir https://dev.to/frehner/css-vh-dvh-lvh-svh-and-vw-units-27k4https://dev.to/frehner/css-vh-dvh-lvh-svh-and-vw-units-27k4#dynamic-viewport-units

Ce lien n'est pas bon.

Par contre le deuxième fonctionne, c'est intéressant.
Modifié par boteha_2 (28 Jul 2024 - 17:48)

Ah zut, lien corrigé

Pour sticky et fixed, je pense que tu ne les connais pas bien, is sont vraiment différents, tu devrais t'intéresser à sticky, qui lui reste bien dans le flux du document et interagit avec le contenu. Ce n'est pas un post-it

Cdt
Modifié par gcyrillus (28 Jul 2024 - 18:18)

boteha_2 a écrit :

Si je comprends, entre fixed, sticky et un code un peu tordu avec GRID ta préférence est sticky.

Heu non, je n'ai pas de préférences, les deux exemples , l'un avec, l'autre sans ont pour différence l'élément qui montre une barre de défilement. Body Vs main. Le choix dépend du comportement attendu bien que la grille soit la même

Cdt
Modifié par gcyrillus (28 Jul 2024 - 19:31)

D'accord, pour toi le critère de décision est la position de la barre de défilement.

Stticky -> barre dans body.

Grid -> barre dans main.

Je vais y réfléchir.

Petit détail, avec sticky, afin de créer une marge opaque au dessus du footer j'utilise box-shadow:

footer {box-shadow: 0 -15px var(--blanc)}

Avec GRID c'est row-gap qui crée l'espace opaque.
Modifié par boteha_2 (28 Jul 2024 - 19:50)