Question

我遇到css问题。

我有一个固定高度的div 400px，在div中有一些变量文本。和图像一样，我需要图像来填充div的空间。文本将发生变化，因此空间总是不同，所有都必须在高度范围内。

Answer 1

我找到了一个解决方案，使用display: flex并在div的背景上设置图像。

您可以在此处查看代码：https://jsfiddle.net/ckryvuzm/

我尝试使用display: table，但是当内容发生变化时，400px的固定高度会增加。

Answer 2

将div的宽度定义为100％，其中包含400px的高度并显示：flex和flex-direction：column。

在里面它使得图像div变为flex-grow：1。

并将所有内容放在一个div中，然后设置overflow：auto，因为内容越少，就不会滚动内容，如果内容越来越大，内容就会变成滚动条。

这里做了一个小提琴，我认为这完全可以解决你的问题：https://jsfiddle.net/ABhimsaria/vj7bgzpb/2/

#container {
  position: relative;
  font-size: 20px;
  height: 400px;
  width:100%;
  border:1px solid black;
  height: 400px;
  display: flex;
  flex-flow: column;

}

图像填充固定高度div

2 个答案: