CSS flexbox 一个元素固定高度，其他填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25305550/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
flexbox one element fixed height, other filling
提问by Kageetai
I want to make some kind of image viewer with some descriptive text below. Problem is, that the lower box with the description has a fixed height and the image should fill the remaining height of whatever container it is in.
我想用下面的一些描述性文字制作某种图像查看器。问题是，带有描述的下部框具有固定高度，图像应填充其所在容器的剩余高度。
I wanted to use flexbox for that, as I think it seems to be the most elegant and simple solution (without using JS). This this code and codepen for my current work, which seems to work mostly:
我想为此使用 flexbox，因为我认为它似乎是最优雅和最简单的解决方案（不使用 JS）。这是我当前工作的代码和代码笔，它似乎主要工作：
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 */
}
http://codepen.io/Kageetai/pen/AaCJy
http://codepen.io/Kageetai/pen/AaCJy
I got most of it to work but the image is not resizing itself correclty. As you can see through the transparent background of the text box, it stretches itself over the border of the containing div and even behind the text box. So how can I retain the image with the correct aspect ratio inside its container?
我得到了大部分工作，但图像本身没有调整大小。正如您通过文本框的透明背景所看到的那样，它在包含 div 的边框上甚至在文本框后面伸展自身。那么如何在其容器内保留具有正确纵横比的图像呢？
And furthermore the centering with margin: 0 auto;seems to make problems when resizing the window. The image is not centered anymore and the page needs a refresh to make it work again.
此外，margin: 0 auto;在调整窗口大小时，居中似乎会出现问题。图像不再居中，页面需要刷新才能再次工作。
So does anyone know how to make the image behave correctly? :)
那么有谁知道如何使图像正确运行？:)
采纳答案by G-Cyrillus
For image , you can set an height, margin and display.
对于 image ，您可以设置高度、边距和显示。
For image container, give a 2 or 3 value to flex and none to other, so it fills as much space as avalaible.
对于图像容器，给 flex 一个 2 或 3 个值，而不给其他值，这样它就可以填充尽可能多的空间。
CSS used :
使用的 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%;
}
回答by bjfletcher
Here's a more basic demo of how to achieve this.
这是有关如何实现这一点的更基本的演示。
<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>
A demo can be seen over at Codepen.
可以在Codepen上看到一个演示。
