两个div动态填充视口高度

Question

我在尝试设置这个设置时遇到了麻烦。 #container应该是height的{​​{1}}，viewport应该#caption，take as much height as it needs应该是img in #image（同时保持其纵横比）。 fill the remaining height永远不应超过视口#container。

height

这是一个如何动态工作的例子：

有什么建议吗？我自己也摆弄了flex和table，但没有用，页面总是超出viewport <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> 。

Answer 1

您可以{/ 1}}使用

您可能需要一些媒体查询。

＆＃13;

＆＃13;

flexbox

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;