html - 垂直柔性容器中粘性页脚的各种问题

Question

预期结果:#footer 粘在#container 可见区域的末尾。如果完全向下滚动，#content 仅隐藏在页脚后面，直到 #container。

---

Chrome:符合预期

Firefox:#footer 粘在 #container 可见区域的末尾，但在 #content 的底部当 #container 滚动到末尾而不是放在 #footer 的顶部时，保持隐藏在它后面。

Safari:#footer 不固定，它的位置与静态位置相同。

---

在每个浏览器的最新版本的 macOS 上测试。

所有浏览器都应该正确处理 according to mozilla和 caniuse ，这是错误还是我做错了？

#container {
  display: flex;
  flex-flow: column;
  overflow: auto;
}
#content {
  flex: none;
}
#footer {
  flex: none;
  position:sticky;
  bottom:0;
}

/* styling purpose */
#container, #content, #footer {
  border:8px solid;
  opacity: .6;
 }

<div id=container style="height: 100px; border-color: green">
  <div id=content style="height: 200px; border-color: red"></div>
  <div id=footer  style="height:  20px; border-color: blue"></div>
</div>

这个片段只是展示了这个问题，我实际上在我的代码中使用了 flexbox 属性，否则 #container 当然只是一个普通的 block 。

Answer 1

尝试使用 -moz 和 -webkit hacks sticky 还没有完全支持