重叠绝对定位的内容

我遇到了一些困难这一页 http://louiswalch.com/beta/t/urs/。它几乎可以正常工作。

红色框应位于窗口的中心 (h&v)。作品。

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

当窗口小于 400 像素高时，应出现滚动条，并且黄色框应出现在滚动区域的底部。基本上我不想让黄色框出现在红色框上方，反之亦然。不起作用

有人知道我怎样才能实现这一目标吗？

Thanks.

将其添加到 CSS 中#wrapper:

height: 100%;
position: relative;

这样做的原因是因为您的绝对定位元素是相对于视口定位的，因为没有任何其他元素包含块 http://www.w3.org/TR/CSS2/visudet.html#containing-block-details。通过增加position: relative to the #wrapper（或者body就此而言）您确保包含块成为整个正文内容。

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