我的应用程序上有一个导航栏底部，我想将其放置在视图或文档网的底部，以较低者为准。我有一些奇怪的行为，无法解决。这是我的 application.html.erb 的代码。这个想法是使 navbar-fixed-bottom 以便如果窗口小于文档，则导航栏将向下移动：
<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>
我试过只使用一种方法或另一种方法，但没有运气。以下是一些正在发生的事情的图片。
当我在全屏浏览器窗口中加载页面时：
非根页面的示例未将正确大小的导航栏放置在窗口底部：
如果您看到我可以改进的地方，请告诉我。谢谢。