手动设置高度时，Div重叠

Question

以下是页面：https://hamzicabdulah.github.io/Raptitude/

当手动设置“other-stories”div的高度时，带有“other-stories”和“footer”类的div重叠：

.other-stories {
  height: 65%;
}
@media screen and (min-width: 768px) {
  .other-stories {
    height: 89%;
  }
}

如果我删除上面的代码，div不会重叠。这里的解决方法是什么，考虑到“其他故事”div的手动设置高度需要留在那里才能在Firefox中正常工作？

Answer 1

将Float设置为页脚和其他故事。

.other-stories {
  height: 65%;
  float:left;
}
@media screen and (min-width: 768px) {
  .other-stories {
    height: 89%;
    float:left;
  }
}

Answer 2

它重叠，因为<div>中的<div class="other-stories"> s溢出了div本身。

为什么other-stories上有一个固定的高度你想要获得什么功能？另外，您使用高度％s是否有特殊原因？

Answer 3

使用flex有点棘手。我建议改变所有，删除flex显示并使用bootstrap网格。你知道吗？