flexbox一个元素固定高度,其他填充

Question

flexbox一个元素固定高度,其他填充

我想用下面的一些描述性文字制作某种图像查看器.问题是,带描述的下方框具有固定的高度,图像应填充其所在容器的剩余高度.

我想使用flexbox,因为我认为它似乎是最优雅和简单的解决方案(不使用JS).这个代码和codepen用于我当前的工作,它似乎主要起作用:

html,  body,  #container {
    height: 100%
}
#container {
    display: flex;
    flex-direction: column;
}
#container > #image {
/* flex-grow: 1; */ /* not needed here? */
    max-width: 75%;
    background-color: #fcc;
    margin: 0 auto;
}
img {
     max-height: 100%;
    /* HERE IS WHERE MY PROBLEM STARTS!; */
     max-width: 100%;
}
#container > #text {
    flex-grow: 0;
    flex-shrink: 0;
    background-color: rgba(128, 128, 128, 0.7);
    padding: 5px;
    max-width: 75%;
    margin: 15px auto 0;
/*  TOP MARGIN DOESN'T WORK */
}

Run Code Online (Sandbox Code Playgroud)

http://codepen.io/Kageetai/pen/AaCJy

我得到了大部分工作,但图像并没有调整自己的大小.正如您可以通过文本框的透明背景看到的那样,它会在包含div的边框上延伸,甚至在文本框的后面.那么如何在容器内保留正确宽高比的图像呢？

此外,margin: 0 auto;在调整窗口大小时,居中似乎会出现问题.图像不再居中,页面需要刷新才能再次运行.

那么有谁知道如何使图像正常行为？:)

Answer 1

G-C*_*Cyr 8

对于图像,您可以设置高度,边距和显示.

对于图像容器,给予2或3值flex,而不给其他值,因此它填充的空间与avalaible一样多.

DEMO

使用的CSS:

html,
body,
#container {
  height: 100%
}

#container {
  display: flex;
  flex-direction: column;
}
#container > #text {
  background-color: #ccf;
  padding: 5px;
}
#container>#image {
  flex:3;
  display:flex;
}
img {
  width:auto;
  display:block;
  margin:auto;
  height:100%;
}

Run Code Online (Sandbox Code Playgroud)

Answer 2

bjf*_*her 5

这是如何实现此目的的更基本的演示。

<html style="height: 100%">
  <body style="height: 100%; margin: 0; display: flex; flex-direction: column">
    <p>Toolbar</p>
    <div style="background: #bbb; flex: 1">Image</div>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

可以在Codepen上看到演示。

归档时间：	11 年前
查看次数：	25867 次
最近记录：	9 年，10 月前