[Résolu] GRID pour remplacer position: fixed

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.

Re,

si position:sticky en ajout: https://codepen.io/gc-nomade/pen/NWZbEbo n'est pas ce que tu souhaites, (exemple en lien dans le post précédent)

tu as aussi la possibilité de donner une hauteur fixe à body et mettre le scroll sur main: https://codepen.io/gc-nomade/pen/oNrYQPp

extrait css :

body {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  row-gap: 20px;
  height: 100vh;
  height: 100svh;
  margin: 0;
}
main {
  overflow: auto;
}

edit
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
Modifié par gcyrillus (28 Jul 2024 - 16:58)

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)

Merci pour le lien.

gcyrillus a écrit :

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

Je connais sticky que j'utilise et que je trouve génial pour notamment la ligne de menu en haut de page.
Mais c'est vrai que j'avais oublié qu'un élément en position sticky reste dans le flux.

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

Je vais le mettre en œuvre, je reviens si problème.
Modifié par boteha_2 (28 Jul 2024 - 19:00)

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)

Bonjour,

Trois solutions pour le même problème.

Un critère de choix, la position de la barre de défilement.

Je coche Résolu, grand merci à gcyrillus.