Question

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

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

我尝试使用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的按钮。对我来说，这是糟糕的设计。它是一种形式 - 用户期望以某种方式行事的工具。我相信“玩”提交按钮的位置是一个坏主意 - 除非它在整个表单提交过程中有一个非常具体的位置。

也许粘性页脚结合平衡页面之间的输入计数会给你最好的“需求”和“需求”

Answer 2

您可以在CSS中使用媒体查询来实现所需的效果。尽管我喜欢编写JavaScript，但CSS是一个更好的资源。 http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

*作为旁注，IE8本身不支持媒体查询。但是，您的主要目的是为移动设备提供响应式设计 - CSS可以很好地为您处理。

jquery mobile align按钮取决于内容大小

2 个答案: