問題與詞綴bootstrap當詞綴div大於內容和窗口

Question

當詞綴div大於主內容和窗口時，我遇到了詞綴引導的問題。 http://jsfiddle.net/d8jzenbr/

var headerHeight = $('header').outerHeight(true);/
var footerHeight = $('footer').outerHeight() + 60; 
$('#account-overview-container').affix({ 
    offset: { 
     top: headerHeight, 
     bottom: footerHeight 
    } 
}).on('affix.bs.affix', function() { // before affix 
}); 

見這裏的問題，當含量不夠大：

這裏，因爲有足夠的內容一切正常http://jsfiddle.net/90m0r91t/（有一個問題，當詞綴頂變成詞綴）

我該如何解決這個問題，因此當沒有足夠的內容時，詞綴div保持靜態而不固定？

感謝您從.affix-bottom

.affix-bottom{ 
position:absolute /* Comment out this line */ 
} 

Answer 1

刪除位置使用jQuery，獲取文檔的高度，少了頁眉和頁腳的高度。然後用這個將if語句放在詞綴上。

if(contentHeight > sidebarHeight) { 
    $('#account-overview-container').affix({ 
     offset: { 
      top: headerHeight, 
      bottom: footerHeight 
     } 
    }).on('affix.bs.affix', function() { // before affix 
     $(this).css({ 
      /*'top': headerHeight,*/ // for fixed height 
     }); 
    }) 
} 

DEMO：http://jsfiddle.net/d8jzenbr/6/

Answer 2

絕對