jquery移动对齐按钮取决于内容大小

我想使用javascript/jquery和css实现以下布局。我有一个用jquery mobile编写的项目。按照预期，有页眉、内容和页脚。我的页脚内部没有任何内容，浮动在页面底部。我的内容是一个动态的表单，底部有一个下一个按钮来提交它。在提交时，我会得到一个带有按钮的不同表单。该按钮始终位于表单右侧的下方。

根据表单内的内容，按钮应浮动在表单下方并向右对齐。如果表单内容较小，并且没有覆盖屏幕，则按钮应位于页脚上方并向右对齐。如果表单中的内容大于屏幕大小，则按钮应位于表单内容下方。

我尝试使用jquery方法来获取屏幕的大小，并对按钮进行over-css设置，但这给了它一个固定的属性，如果我更改屏幕，它不会改变。

  var innerHeight = $('#contents').height();
  alert(innerHeight);
  var screenHeight = window.innerHeight;
  alert(screenHeight);
  if(innerHeight < screenHeight) {
    $('#contents').css("height", screenHeight-120);
  }

我希望它是动态的，这样如果在手机上观看，它可以在横向和纵向上正确渲染。谢谢你的建议。