兩個div動態填充視口高度

Question

我在嘗試設置樣式時遇到問題。 #container應該是viewport的height,#caption應該take as much height as it needs和img in #image應該fill the remaining height（同時保持其縱橫比）。 #container絕不應該超過視口height。

<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> 

這裏是如何做到這一點工作動態的例子：

有什麼建議？我自己也擺弄了flex和表格，但沒有用，頁面總是以超過視口height結束。

Answer 1

您可以使用flexbox爲

，你可能需要一些媒體的質疑。

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>