1

我想使用 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);
  }

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

4

2 回答 2

1

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

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

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

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

也许粘性页脚与平衡页面之间的输入计数相结合，将为您提供最好的“想要”和“需要”

于 2012-09-11T17:06:53.447 回答
0

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

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

于 2012-09-11T16:43:38.937 回答