Javascript Jquery移动用户界面网格

只是一个简单的jQuery移动问题

我正在使用

ui-grid-a

（对于50/50分割的基本情况），我可以填充和渲染网格而不会出现问题。但是，在某些情况下，项目比内容大小少，我很好奇是否可以让网格不包装内容，而是填充div中的可用空间

我试过几种不同的方法

1） 基本配置无需修改-

ui网格

似乎包裹了内容检查显示

data role=content

上的高度比页面小得多。因此，网格正在“填充”内容

2） 因此，我接着努力扩展内容。使用一些JS fiddle代码（如下），我可以为内容设置一个高度（检查证实了这一点），但是网格只保留了内容区域的一小部分

jQuery code in

.ready（）

调整内容大小以填充页面

var screen = $.mobile.getScreenHeight();
var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
var content = screen - header - footer - contentCurrent;
$(".ui-content").height(content);

3） 我尝试将其绑定到页面加载，认为网格可能是在Javascript启动之前计算的。但是没有运气

欢迎提出任何建议。我并不局限于jQuery，我尝试了许多CSS选项，但是这些样式在使用自定义jQuery移动UI（内容/页面）时似乎没有帮助

提前谢谢大家,

根据要求，提供了一个镜像我自己的标记示例（我在其中添加了一些弹出窗口div，但这代表了主要内容）

家

首先，我要向@Omar表示衷心的感谢，感谢他在创建此解决方案时提供的帮助

有几个因素导致了这个问题。首先是页面加载顺序，以确定何时计算页眉、页脚和内容的元素高度。为此，您可以绑定到pagebeforecreate事件：

$(document).bind("pagebeforecreate", function (e, data) {
    $(document).on("pagecontainertransition", contentHeight);
    $(window).on("throttledresize orientationchange", contentHeight);
});

---

现在我将讨论如何动态调整网格大小

接下来，您必须考虑设备的屏幕大小，并使用代码计算每个行元素的适当大小

var screen = $.mobile.getScreenHeight();

然后必须计算内容的大小以及该内容的可用大小

var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();

var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();

var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

var content = screen - header - footer - contentCurrent;

从这里可以计算网格大小

var numRows = 3;
$(".ui-content .ui-block-a .ui-btn,.ui-content .ui-block-b .ui-btn").height((content / numRows) - 32);

}

---

下一步，因为您可能有多个网格

在这种情况下，可以添加一个降序选择器来指定要调整大小的网格

$("#GridID.ui-content .ui-block-a .ui-btn, #GridID.ui-content .ui-block-b .ui-btn").height((content / numRows) - 32);

---

最后，由于此事件仅绑定到页面一次，您必须同时调整所有网格的大小，但是网格可能位于不同的页面上，并且您必须选择这些大小，因为每个页面的内容大小可能不同

var header = $("#pageID .ui-header").hasClass("ui-header-fixed") ? $("#pageID .ui-header").outerHeight() - 1 : $("#pageID .ui-header").outerHeight();

var footer = $("#pageID .ui-footer").hasClass("ui-footer-fixed") ? $("#pageID .ui-footer").outerHeight() - 1 : $("#pageID .ui-footer").outerHeight();

var contentCurrent = $("#pageID .ui-content").outerHeight() - $("#pageID .ui-content").height();

var content = screen - header - footer - contentCurrent;

---

这里有一把小提琴来演示全部功能

---

希望这能帮助其他人，因为在创建通用移动网页时，这似乎是一项相当常见的任务

您不应该使用

.ready（）

来设置内容的高度，因为content div中的元素当时不可见，因此它们的高度没有定义。您好，感谢您的快速响应，以及DOM加载顺序的优点。然而，如果你看一下你发送的第二个链接，你会发现这些项目也不是垂直分布的（我知道它们是独立的，这是一个不同的问题），但它表明UI网格包装了修道院，而不是扩展以填充内容。第一个链接通过使用背景图像来实现这一点，但相同的100%样式不适用于UI元素。对网格有什么建议吗？您是否在

ui-grid-a

中包装您的内容div？你能发布你的html标记吗？请看上面的更新-我也非常乐意摆脱我最初发布的jquery，它很烦人，因为它会修改其他项目的大小，例如弹出窗口（这意味着我需要对选择器进行子类化）你想放大网格以填充内容分区吗？弹出div应该在任何div之外，它们应该放在页面div下。顺便说一句，上面的代码是我的，这是一般性的，您只需要更改选择器

$（“.ui content”）.height（）

当您添加新的高度值：）

var header = $("#pageID .ui-header").hasClass("ui-header-fixed") ? $("#pageID .ui-header").outerHeight() - 1 : $("#pageID .ui-header").outerHeight();

var footer = $("#pageID .ui-footer").hasClass("ui-footer-fixed") ? $("#pageID .ui-footer").outerHeight() - 1 : $("#pageID .ui-footer").outerHeight();

var contentCurrent = $("#pageID .ui-content").outerHeight() - $("#pageID .ui-content").height();

var content = screen - header - footer - contentCurrent;