顶部 div 的动画位置创建空间答案

【问题标题】：Animating position of top div creates space顶部 div 的动画位置创建空间
【发布时间】：2012-10-09 10:03:15
【问题描述】：

我的页面内容周围有一个名为#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

【问题讨论】：

你能发布一个 jsfiddle 吗？ :)
你能提供一个html例子吗？
已将页面链接放入。

标签： javascript jquery html css jquery-animate

【解决方案1】：

在#wrap 上使用position: absolute。

为什么？

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

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

【讨论】：