将页脚放在视图或文档的底部，以较长者为准

Question

我的应用程序上有一个导航栏底部，我想要放在视图底部或documnet中，以较低者为准。我得到一些奇怪的行为，无法解决。这是我的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>

我尝试过只使用一种方法，但没有运气。以下是一些正在发生的事情的照片。

当我在全屏浏览器窗口中加载页面时：

非root的页面示例未将正确大小的导航栏放在窗口底部：

如果你看到我能改进的地方，请告诉我。感谢。

Answer 1

这是一个常见的CSS问题，称为“粘性页脚”，也有很多方法可以解决它。有或没有jQuery。你可以google它，找到你想要的更多。

我正在使用这个简单的方法http://mystrd.at/modern-clean-css-sticky-footer/