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

我目前的問題是，頁面似乎保持其完整高度時，一切都上移關屏，它創建我的內容底部有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將調整定位並將其從正常流程的上下文中取出，從而摺疊下面的內容，這正是您想要的 - 擺脫該空間。