问题与词缀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

绝对