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

Posted 2023-05-09

【中文标题】jQuery Mobile：在完全加载时修改 DOM 以使页面高度为 100%

【英文标题】：jQuery Mobile: Modify DOM when fully loaded to make page 100% in height

【发布时间】：2012-04-11 19:13:05

【问题描述】：

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

jQuery Mobile 声称使用pageInit and not $(document).ready。不幸的是，当 pageInit 被调用时，DOM 似乎没有完全加载

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

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

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

编辑：

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

【参考方案1】：

我猜你的情况是 header = [] 。但要么我不明白这个问题，要么我不明白为什么需要 javascript。你不能用简单的css来做吗？

.headerheight:20%
.contentheight:60%
.footerheight:20%

或类似的东西

【讨论】：

当然，一些简单的 css 就可以了，但是当我使用带有 % 的内联 css 时，我的页眉、页脚和内容 div 的高度不适用，内容高度也不会改变。只有当我使用绝对 px 值时，高度才会改变。

【参考方案2】：

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

或者，您可以为资产指定指定尺寸，例如，如果它是一张图片，并且您知道它将是 300px by 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

【讨论】：

感谢您的建议。正如您已经提到的，window.load 事件对我不起作用，因为我想使用 AJAX 链接行为。因为我不知道尺寸我也不能使用你的第二个建议。使用 1.1.0 RC1 时。我在我的问题中添加了一个 jsFiddle，也许这有助于解决我的问题。

【参考方案3】：

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

【参考方案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 ));       
    );