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');
})

我目前的问题是，当所有内容从屏幕上移开时，页面似乎保持其全高，这会在我的内容底部创建130px的空白区域。怎么回事呢？

我的#Wrap目前只拥有样式position:relative;，但也尝试使用height:100%;和height:auto;但没有运气。

编辑：点击页面：http://www.emilekelly.com/TestFolder/index.html

Answer 1

在position: absolute上使用#wrap。

为什么？

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

然而position: absolute将调整定位并使其脱离正常流量的上下文，从而折叠下面的内容，这就是你想要的 - 摆脱那个空间。

顶部div的动画位置创造了空间

1 个答案: