Bonjour, je dev un site qui doit avoir sur la page d'accueil une grande image (pleine largeur) qui s'affiche sous mon header. En dessous il y a d'autres contenus qui sont accessibles (seulement si on scroll).
Mon but est que (suivant les résolutions d'écrans) le bas de ma div qui contient l'image se colle toujours en bas de la page (visible au chargement). C'est à dire que l'on ne voit pas le début des contenus sous l'image et que la hauteur de ma div s'adapte à l'espace qui reste.

J'avais entendu dire qu'il possible de faire ça, mais j'arrive à trouver des sources.
Pour le moment j'ai utilisé calc() en CSS mais c'est pas très dynamique.

Merci par avance pour vos réponses :)

6 réponses


Tu peut te base sur JS avec avec window.innerHeight

??? Ne comprenant pas bien ta demande, et croyant a peu près saisir sans en être réellement sur et certain, car je ne suis pas devin ni prophète, trève de plaisanterie, peut être que cela pourra t'aider ? :
min-height: 100vh; => https://www.alsacreations.com/astuce/lire/51-hauteur-100-element.html

As tu regardé tu coté du display flex et du align-self ?

Merci à tous les 3. Désolé de vous répondre que miantenant. Je vais tester chacune de vos propostionts et je reviens vous dire si ça marche. merci encore pour votre aide.

c'est window.innerHeight qui gagne :) merci encore

La solution de la height en vh est mieux, vu que c'est full css, le rendu a l'affichage est instantanné contairement à l'utilisation du js