Question

我想让jQuery Mobile页面中的内容区域拉伸，以便页面填充100％的视口（标题+内容+页脚= 100％）。我认为当DOM完全加载时我必须进行高度对齐，所以我有所有div的高度，然后我可以做类似this的类似事情。

jQuery Mobile声称使用pageInit and not $(document).ready。当pageInit被称为

时，unforunatelaty似乎没有完全加载DOM

var header = $("div[data-role='header']")
console.log(header.height());

告诉我高度为0.当我在$（document）.ready（）中使用相同的代码时，它告诉我它是79px。

那么进行比对的最佳做法是什么？

编辑：

Here是一个jsFiddle，显示了我的页面的基本结构。我希望画布填充页眉和页脚之间的整个空间。

Answer 1

我想在你的情况下，header = []。但要么我不明白这个问题，要么我不明白为什么需要javascript。你不能用简单的CSS做到吗？

.header{height:20%}
.content{height:60%}
.footer{height:20%}

或类似的东西

Answer 2

如果您正在等待加载图像（或其他外部资源），则需要将load事件处理程序直接绑定到元素/资产或等待window.load事件，以便资产的维度是正确的。

或者，您可以为资源指定尺寸，例如，如果它是图像，并且您知道300px为200px，则将这些值设置为属性或通过CSS。通过这种方式，可以在window.load事件触发之前获得正确的维度，这可以更好地处理jQuery Mobile页面事件，因为当页面通过AJAX进入DOM时，您无法等待window.load触发

如果您使用的是旧版本而不是1.1.0 RC1，那么我建议您检查一下，它有CSS固定的页脚，看起来/感觉很好，并使您的页面始终显示100％的高度。 http://jquerymobile.com/blog/2012/02/28/announcing-jquery-mobile-1-1-0-rc1/#download

Answer 3

如果您的目标是填充页眉和页脚之间的空格，您是否考虑过data-role="content"的高度？

Answer 4

首先，为您的网页创建“pageshow”事件：（它必须是“pageshow”事件而不是“pagebeforeshow”，因为在第二种情况下你不会得到高度 - 页面被隐藏）

// bind "pageshow" event to your page
$("#PageID").live("pageshow", function (event, data) {
    // do something...       
});

在此活动中，检查页眉，页脚和页面大小（带填充和边距）：类似的东西：

var header_height = $("div[data-role=header]").height();
var footer_height = $("div[data-role=footer]").height();
var page_height = $("div[data-role=page]").height();

然后，计算并设置画布的新大小：

$("#MyCanvas").css({"height":page_height - (header_height + footer_height )});

整个示例代码：

    // bind "pageshow" event to your page
    $("#PageID").live("pageshow", function (event, data) {
       var header_height = $("div[data-role=header]").height();
       var footer_height = $("div[data-role=footer]").height();
       var page_height = $("div[data-role=page]").height();

       $("#MyCanvas").css({"height":page_height - (header_height + footer_height )});       
    });

jQuery Mobile：在完全加载时修改DOM以使页面高度为100％

4 个答案: