Min-height:100% je n'y arrive pas

Bonjour,
Sur ce site :
http://maitresse-anne.fr/
Je n'arrive pas à comprendre :
- pourquoi le body fait 730px de hauteur malgré

min-height:100%;

- pourquoi malgré cette hauteur l'image de fond couvre tout le navigateur, comme si elle était sur l'élément html ?
En fait je souhaiterais que le body prenne au minimum toute la hauteur disponible du navigateur, ce pourquoi j'ai mis html, body, #global {min-height: 100%;}
J'imagine que j'ai fait une erreur de compréhension / de codage, mais je n'arrive pas à trouver laquelle.
Merci de vos éclairages,

Salut !

Arnaud04 a écrit :
- pourquoi le body fait 730px de hauteur malgré

min-height:100%;

En fait, on ne peut pas trop emboiter les min-heigh comme ça... http://jsfiddle.net/7L0683af/
Si on lit les spec on a :

a écrit :
<percentage>
La hauteur minimale exprimée de façon relative à la hauteur du bloc englobant grâce à une valeur de type <percentage>. Les valeurs négatives sont interdites, si elles sont utilisées, la déclaration sera considérée comme invalide.

https://developer.mozilla.org/fr/docs/Web/CSS/min-height
Donc en gros, s'il n'y a pas de height explicite sur le parent, bah le min-height est perdu...
Il faut donc rajouter des height 100%, choisir quel bloc aura le scroll et ne pas aller trop loin dans les min-height: 100%; (voir jouer avec d'autres mise en forme comme flex ou grid selon le besoin..)

Arnaud04 a écrit :
- pourquoi malgré cette hauteur l'image de fond couvre tout le navigateur, comme si elle était sur l'élément html ?

Ca c'est un comportement un peu étrange ca aussi je te l'accorde, je n'ai pas les clés pour te l'expliquer mais c'est la gestion du body par le navigateur... html et body sont des éléments un peu particuliers... place ton background sur la div global plutôt pour avoir le comportement recherché.


Bonne journée

Arnaud04 a écrit :

- pourquoi le body fait 730px de hauteur malgré

min-height:100%;

,

Hello,

Les Spécifications CSS exigent, pour des raisons d'accessibilité, que le document ait une couleur de fond et une couleur de texte.
C'est pourquoi, lorsque html n'a pas de couleur définie... il hérite de celle de son fils body.

Arnaud04 a écrit :

En fait je souhaiterais que le body prenne au minimum toute la hauteur disponible du navigateur, ce pourquoi j'ai mis html, body, #global {min-height: 100%;}

Le plus simple est d'utiliser les unités de Viewport : 100vh -> https://www.alsacreations.com/astuce/lire/51-hauteur-100-element.html

... Avec une petite bidouille pour que cela fonctionne aussi sur Safari iOS -> https://www.alsacreations.com/astuce/lire/1831-corriger-le-probleme-de-hauteur-100vh-sur-mobile.html
Modifié par Raphael (15 Jul 2021 - 14:14)

Raphael a écrit :
C'est pourquoi, lorsque html n'a pas de couleur définie... il hérite de celle de son fils body.

Raphael a écrit :
Le plus simple est d'utiliser les unités de Viewport : 100vh -&gt;

Raphael Président !

Bonjour,
Merci pour ces indications.
Je vais essayer de les mettre en œuvre.
Bonne journée,

Bonjour,
Je ne m'en sors pas, j'ai changé complètement de thème.
Bonne journée