javascript - 顶部 div 的动画位置创建空间

Question

我有一个名为#Wrap 围绕我的页面内容的 div，并编写了以下函数来向上移动所有内容，因此我在顶部的导航部分离开了页面，我的内容有更多的屏幕空间:

$('.NavShrink').click(function(up) {
  $('#Wrap').animate({ top: '-=130px'});
  $(this).css('display', 'none');
  $('.NavExpand').css('display', 'block');
})

我还有以下方法可以再次将其恢复原状:

$('.NavExpand').click(function(down) {
  $('#Wrap').animate({ top: "+=130px"});
  $(this).css('display', 'none');
  $('.NavShrink').css('display', 'block');
})

我目前的问题是，当所有内容都移出屏幕时，页面似乎保持其完整高度，这会在我的内容底部创建 130 像素的空白区域。解决这个问题的方法是什么？

我的 #Wrap 目前只有 position:relative; 风格，但也尝试过 height:100%; 和 height:auto; 运气不好。

编辑:这是页面:http://www.emilekelly.com/TestFolder/index.html

Answer 1

在#wrap 上使用position: absolute。

为什么？

因为 position: relative 将 #wrap 相对于其当前位置向上移动，但浏览器仍会考虑其“应该”所在位置下方的空间。

但是 position: absolute 将调整定位并将其从正常流程的上下文中取出，从而折叠下面的内容，这就是您想要的 - 摆脱那个空间。