css - 重叠绝对定位的内容

Question

我在使用 this page 时遇到了一些困难.它几乎可以正常工作。

红色框应在窗口上居中 (h&v)。工作。

黄色框应贴在窗口底部。工作。

当窗口小于 400 像素时，滚动条应该出现，黄色框应该出现在滚动区域的底部。基本上我不希望黄色框出现在红色框上， 或相反亦然。不起作用

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

谢谢。

Answer 1

将此添加到 #wrapper 的 CSS 中:

height: 100%;
position: relative;

之所以可行，是因为您的绝对定位元素是相对于视口(viewport)定位的，因为没有任何其他 containing block。 .通过将 position: relative 添加到 #wrapper(或 body)，您可以确保包含 block 成为整个正文内容相反。

height: 100% 只需要确保包含 block 至少到达视口(viewport)的底部。