28172 sujets

CSS et mise en forme, CSS3

[Résolu] Align-self: stretch ne fonctionne pas

Bonjour,
Le code html simplifié :

<body>
    <div class="site grid-body>
        <main class="site-main"></main>
        <footer class="site-footer"></footer>
    </div>

Le code Css :

:root {
--padding-body: 16px 16px;
}
body {
    padding: var(--padding-body);
}
.grid-body {	
    display: grid;
    row-gap: 1.5rem;
    min-height: calc(100vh - 2 * var(--padding-body));	
    grid-template-rows: 1fr min-content;
}
.site-main {
    align-self: stretch;
}

La hauteur du main est bien prise en compte (1fr) mais le align-self:stretch (arriere plan jaune sur l'image) n'est pas pris en compte ( sans doute parce que j'ai donné une hauteur de 100vh au parent) mais c'est pour que le footer reste collé en bas lorsqu'il n'y a pas assez de contenu.
upload/1654770137-831-capture01.jpg
Modifié par cpalo (09 Jun 2022 - 12:25)
Modérateur
Salut,

https://jsfiddle.net/2sfx7L85/1/

Ca a l'air de bien marcher...

Sinon :
- il manque un guillemet à <div class="site grid-body>
- Je ne suis pas sur que calc(100vh - 2 * var(--padding-body)); fonctionne bien avec "16px 16px" à la place de la variable
Modérateur
bonjour,

En appliquant un display flex ou grid sur html et le min-height sur html , body verra sa hauteur calculée par le navigateur pour qu'il remplisse son parent devenu une grille (flex/grid). grid est logiquement à privilégié , par défaut il ne créer qu’une colonne, flex créer une ligne.

Comme body est maintenant un élément de grille avec une hauteur calculée, un min-height:100% sur un enfant direct est applicable.

le --padding-body:16px 16px et le row-gap: 1.5rem pourrait se fondrent en --padding-body:16px; et row-gap:var(--padding-body);

fiddle de laurent repris avec les idées : https://jsfiddle.net/2j97txcr/1/ (inclus un box-sizing/margin reset )

Cdt


edit , si 1fr pour la ligne, alors stretch est déjà implicite pour main Smiley cligne https://jsfiddle.net/2j97txcr/2/
Modifié par gcyrillus (09 Jun 2022 - 16:07)
Oups!!
Autant pour moi, j'ai zappé une partie du code...
Bien sur que 

.site-main {
   background-color: lightgray;
    align-self: stretch;
}

Cette partie fonctionne,
Ce que je n'arrivais pas à obtenir c'est pour l'article class post en jaune.
Mais j'avais oublié de declarer en grid son parent(site-main)

<body>
    <div class="site grid-body">
        <main class="site-main">
            <article class="post">
                   <div class="inside-post grid-content">
                  </div>
           </article>
        </main>
        <footer class="site-footer"></footer>
    </div>



.site-main {
    display: grid;
}	
.post {
    background-color: yellow;
}

Modifié par cpalo (09 Jun 2022 - 18:16)
upload/1654791725-831-capture02.jpg Le résultat obtenu.
Et merci pour les remarques , en particulier sur les variables et les hauteurs.
Modifié par cpalo (09 Jun 2022 - 18:22)
Oui c'est résolu.
En fait ce qui n'était pas correct c'était

.site-main {
    align-self: stretch;
}

Il fallait qu'il y ait un contexte de grid 

.site-main {
   display: grid;
}

Et ainsi article class="post" (en jaune), enfant direct de site-main devenait un grid-item, et pouvait également s'étaler.
Modifié par cpalo (10 Jun 2022 - 19:20)
Sujet clos
Aller à