Div qui s'étend automatiquement sur le restant de la page visible

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

Bonsoir.

En utilisant height: 100vh ?

Zelena a écrit :

En utilisant height: 100vh ?

Hello,

Oui ça devrait fonctionner. Par contre attention à "height" qui est figé (s'il y a plus de contenu, ou si le visiteur agrandit la taille de police, alors le contenu va déborder du div et devenir potentiellement inaccessible). Il vaudrait mieux, selon moi, préférer systématiquement "min-height".

Bonne journée

EDIT : en relisant, je me dis que la réponse n'est peut-être pas appropriée. 100vh va occpuer toute la hauteur de page, pas "toute la hauteur restante".
Pour cela, la meilleure solution est Flexbox :
https://codepen.io/raphaelgoetter/pen/zxorJy?editors=1100
Modifié par Raphael (28 Aug 2017 - 08:41)