Css 底部固定时如何滚动整个内容

因此，我有一个底部div，它需要在所有屏幕大小中固定，当屏幕大小足够小时，剩余的上部内容就会滚动

.mainContainer {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  text-align: center;
  position: fixed;
  top: 0;
  bottom: 70px;
  width: 100%;
}
.fixedBottom {
  display: flex;
  flex-direction: row;
  padding: 10px 10px;
  justify-content: space-around;
  bottom: 0;
  position: fixed;
  width: 100%;
}

我暂时放置了

bottom:70px

以查看较低的内容，否则

0

页面将无法滚动整个页面，因为底部div是固定的，因此会妨碍它。这个设置实际上在chrome、moz和opera上运行良好，但在safari上不行，我的底部div是白色的lol，但元素在那里

---

更新：（临时解决方案）由于底部div是固定的，无论发生什么情况，它都将位于页面底部，因此将

fixedbooth

放在

maincainer

之外

mainContainer

成为

FixedBooth

的同级元素，并将这些元素包装到一个div中。但是，我仍然希望

mainContainer

成为父元素

也许给它

z指数：1？没有工作经验很难说example@Alon是的，我试过了。把它放在主容器下，卷轴就不工作了。底部仍然变白。所以这不是分层问题。