在firefox浏览器中使用以下代码重现问题：
<html>
<body>
<div class="bluediv" style="position: absolute;height: 400px;width: 400px;background-color: blue;">
<div class="yellowdiv" style="height: 350px;width: 400px;background-color: yellow;">
</div>
<div class="reddiv" style="position: relative;top: -350px;left: 0;height: 100px;width: 100px;background-color: red;">
</div>
</div>
</body>
</html>
当页面与bluediv（400px）完全一样大时，它可以滚动，因为reddiv占用了额外的50px，因为它位于DOM的底部。但是，reddiv位于相对位置，实际上占用了页面左下角的空间。如何让Firefox不能使页面在400px以上滚动？
我的想法： - 我可以让bluediv没有溢出可见，但我不想; - 我可以让红色div有一个固定的位置，但它也不会很好。