Html DIV-won'；t填充母体的剩余高度

我试图让

.image cntnr

div填充其父级的剩余高度，但似乎无法使其正常工作。我尝试添加一个

float

属性，因为我在其他一些SO帖子中读到了这一点。非常感谢您的帮助

HTML

---

发生这种情况的原因是，您已将

image cntnr

元素的高度设置为100%，但该元素的父元素（

v1

）本身没有确定的高度。您给定的

图像cntnr

的100%高度需要相对于某个确定的数字。现在，它是0%的100%。给

#v1

元素一个确定的高度（比如200px），您将看到

图像cntnr

的100%工作正常。

尝试添加以下CSS规则：

#v1 {
  position: relative;
}

.image-cntnr {
  position: absolute;
}

.row-handle {
  z-index: 2;
}

---

灵活的盒子来营救。我选择了

.view

类，并将其显示更改为

flex

，带有

flex-direction:column

。这保持了已经存在的相同行为，但当我将

flex grow:1

添加到

.image cntnr

时，它正确地占用了所有剩余空间，而没有超过剩余空间

看看更新后的代码笔

这是我添加/更改的css

.view {
  display: flex;
  flex-direction: column;
}

.image-cntnr {
  background-color: cyan;
  flex-grow: 1;
}

---

我试着给

#v1

一个

100%

的高度，但是没有用。我不想设置固定高度，因为视图可调整大小后，高度将发生变化。我知道，但现在它比父视图大。同时设置宽度和高度可能会延伸到首先满足的属性。去掉宽度，看看结果如何。另一个选项是使用inherit。可能重复：

#v1 {
  position: relative;
}

.image-cntnr {
  position: absolute;
}

.row-handle {
  z-index: 2;
}

.view {
  display: flex;
  flex-direction: column;
}

.image-cntnr {
  background-color: cyan;
  flex-grow: 1;
}