Étant donné une taille div divisée en taille par rapport à une image dans un conteneur, la flexbox peut-elle calculer automatiquement une seconde hauteur div pour remplir le conteneur?

J'espère pouvoir utiliser flexbox pour résoudre un problème d'empilement div.Étant donné une taille div divisée en taille par rapport à une image dans un conteneur, la flexbox peut-elle calculer automatiquement une seconde hauteur div pour remplir le conteneur?

J'ai un conteneur div. Sa hauteur est 100vh.

A l'intérieur de ce div, j'ai deux divs.

Un, contient une image. Sa hauteur dépend de la taille de l'image, qui augmente proportionnellement à la largeur du navigateur jusqu'à max-width.

Une seconde div est au-dessus de la première div. Je veux que son height soit égal à la hauteur restante de la div.

Est-ce que flexbox peut le calculer automatiquement pour moi? En espérant.

Source

2015-11-29 in code veritas

Est-ce que vous cherchez https://jsfiddle.net/2Lzo9vfc/212/? –

La réponse est oui. Essayez d'apposer flex: 1 au second div. Cela lui dit de s'étirer pour remplir l'espace restant dans le conteneur.

est ici une illustration de l'effet: DEMO

Source

2015-11-29 19:39:50

Doit être empilé verticalement .. –

Ceci est adressé dans la démo. Décommentez la règle 'flex-direction: colonne'. [** Revised Demo **] (http://jsfiddle.net/j83fj61h/1/) –

Désolé, vous avez mentionné l'empilage vertical dans votre question. Cette partie m'a échappé lors de la préparation de la démo, où il a été inclus comme une alternative. –

Étant donné une taille div divisée en taille par rapport à une image dans un conteneur, la flexbox peut-elle calculer automatiquement une seconde hauteur div pour remplir le conteneur?

Répondre

Questions connexes