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