javascript - jquery mobile 根据内容大小对齐按钮

Question

我想使用 javascript/jquery 和 css 实现以下布局。我有一个用 jquery Mobile 编写的元素。正如预期的那样，有页眉、内容和页脚。我的页脚里面什么也没有，漂浮在页面底部。我的内容是一个动态的表单，底部有一个下一个按钮来提交它。提交时，我会得到一个带有按钮的不同表格。该按钮始终位于表单右侧的下方。

根据表单内的内容，按钮应 float 在表单下方并右对齐。如果表单内容很小并且没有覆盖屏幕，按钮应该落在页脚上方并右对齐。如果表单中的内容大于屏幕大小，则按钮应粘贴在表单内容下方。

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

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

我希望它是动态的，这样如果在移动设备上查看，它就会在横向和纵向上正确呈现。感谢您的所有建议。

Answer 1

听起来您正在为该按钮寻找粘性页脚:http://www.cssstickyfooter.com/

确保将粘性页脚填充到至少您在帖子中提到的固定位置页脚元素的高度(这将确保您的按钮永远不会被隐藏)。

注意:您可能需要重新考虑此设计中的用户体验。
“提交/下一步”按钮的位置应该直观且一致。

例如:表单 #1 的按钮距离输入字段只有几个像素；表单 #2 在输入下方 100px 处有该按钮。对我来说，这是糟糕的设计。它是一种形式——一种用户期望以某种方式行事的工具。我认为“玩弄”提交按钮的位置不是一个好主意——除非它在整个表单提交过程中有一个非常具体的位置。

也许粘性页脚与平衡页面之间的输入计数相结合，可以让您兼顾“想要”和“需要”