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

Question

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

jQuery Mobile声称使用pageInit而不是$（document）.ready 。 当调用pageInit时，unforunatelaty似乎没有完全加载DOM

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

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

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

编辑：

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

Answer 1

首先，为您的页面创建“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 )});       
    });

Answer 2

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

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

或类似的东西

Answer 3

如果您正在等待加载图像（或其他外部资源），则需要将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 4

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