Zwei divs füllen die Höhe des Ansichtsfensters dynamisch.

Question

Ich habe Probleme, dieses Setup zu stylen. Die #container sollte genau die height der viewport sein, die #caption sollte take as much height as it needs sein, und die img in #image sollte fill the remaining height (unter Beibehaltung des Seitenverhältnisses) sein. Nie sollte das das Viewport height überschreiten.

<div id="container"> 
    <div id="image"> 
    <img src="my-image.jpg" alt="my-image"> 
    </div> 
    <div id="caption"> 
    <p> 
     Some info about this image.<br> 
     Sometimes this could be two lines.<br> 
     Maybe even three. 
    </p> 
    </div> 
</div> 

Hier ist ein Beispiel dafür, wie diese dynamisch funktionieren würde:

Irgendwelche Vorschläge? Ich habe mit Flex und Tabellen auch selbst gegriffen, aber ohne Erfolg, endet die Seite immer über Ansichtsfenster height.

Answer 1

können Sie flexbox für die

verwenden und Sie können einige Abfragen Medien benötigen.

body { 
 
    margin: 0 
 
} 
 
#container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh 
 
} 
 
#caption { 
 
    flex: 1; 
 
    background: red 
 
} 
 
img { 
 
    display: block; 
 
    margin: auto 
 
}

<div id="container"> 
 
    <div id="image"> 
 
    <img src="//lorempixel.com/300/500" alt="my-image"> 
 
    </div> 
 
    <div id="caption"> 
 
    <p> 
 
     Some info about this image. 
 
     <br>Sometimes this could be two lines. 
 
     <br>Maybe even three. 
 
     <br> 
 
    </p> 
 
    </div> 
 
</div>