將頁腳放在視圖或文檔的底部，以較長者爲準

我的應用程序中有一個導航欄底部，我想要放在視圖或文檔的底部，以較低者爲準。我收到一些奇怪的行爲，無法解決。這是我的application.html.erb的代碼。這個想法是讓導航欄，固定底部，這樣如果窗口小於文檔，導航欄將下移：將頁腳放在視圖或文檔的底部，以較長者爲準

<script> 
$(window).on('load', function(){ 
    var bottomPosition = $(document).height(), 
     viewportHeight = $(window).height(), 

    if (bottomPosition <= viewportHeight) { 
     $('#bottom').attr('class', 'navbar navbar-fixed-bottom'); 
    } 


}); 
</script>

這裏是我的根頁（main.html.erb）的代碼。這裏的想法是在頁面加載後，設定文檔的高度等於窗口高度：

<div class="bio" style="padding-top:20px;"> 
    <div class="pic"> 
    <img src="someURL" style="max-height:800px; float:left; padding-left:10px;"/> 
    </div> 
    <div class="text" style="padding-left:200px; width:350px; color:white;"> 
     <h4>Welcome</h4> 
     Some long paragraph  </div> 
</div> 

<script> 
$(window).on('load', function(){ 
    var viewportHeight = $(window).height(), 
     viewHeightString = viewportHeight.toString() + 'px', 
     docHeight = $(document).height(); 

    if (viewportHeight > docHeight){ 
    $('body').css({height: viewHeightString}); 
    console.log(viewHeightString); 
    console.log(docHeight); 
    } 

}); 
</script>

我只是使用一種方法或其他沒有運氣嘗試。以下是正在發生的一些圖片。

當我在全屏瀏覽器窗口中加載頁：

enter image description here