css - 重叠绝对定位的内容

我在this page上遇到了一些困难。这几乎可以正常工作。

红色框应位于窗口的中间（h＆v）。作品。

黄色框应固定在窗口底部。作品。

当窗口小于400像素时，应出现高滚动条，黄色框应出现在滚动区域的底部。基本上，我永远不希望黄色框出现在红色框上方，反之亦然。不工作

有人知道我能做到这一点吗？

谢谢。

最佳答案

将此添加到#wrapper的CSS中：

height: 100%;
position: relative;

之所以起作用，是因为由于没有其他containing block，因此您绝对定位的元素相对于视口已定位。通过将position: relative添加到#wrapper（或与此相关的body），您可以确保包含块成为整个正文内容。

然后仅需要height: 100%以确保包含块至少确实到达视口的底部。

关于css - 重叠绝对定位的内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/1290877/