Question

我有一个jQuery mobile网站，我想展示三个浮动div。

因为我不知道div的内容，我不知道它们的高度，但我想让它们达到相同的高度。

我想，通过以下代码可以很简单：

var maxHeight = 0;
var columns = $('.column');
console.log(columns);
$.each(columns, function (idx, obj) {
    console.log('Outter: ' + $(obj).outerHeight() + "\nInner: " + $(obj).innerHeight() + '\nRegular: ' + $(obj).height() + "\n-----------------\n") ;
    if ($(obj).outerHeight() > maxHeight) {
        maxHeight = $(obj).outerHeight();
    }
});
console.log(maxHeight);
$.each(columns, function (idx, obj) {
    $(obj).outerHeight(maxHeight);
});

但jQuery mobile世界总会有惊喜。

当我第一次下载页面时，div只是显示填充的高度，控制台中有一些非常奇怪的东西。

页面刷新后，一切正常，并按预期工作。

如果还不够，Firefox和Chrom会在页面刷新后显示不同的值。在第一个div中，有一个图像。

第一页的输出在chrome和firefox中加载（第二部分发生两次）：

Outter: 0
Inner: 0
Regular: 0
-----------------
 jquery.min.js line 2 > eval:19:1
Outter: 0
Inner: 0
Regular: -20
-----------------
 jquery.min.js line 2 > eval:19:1
0

第二次，页面刷新后

Outter: 342
Inner: 342
Regular: 342
-----------------
 14g100312503-webkamera_kabelell-h5683.html:284:1
Outter: 112
Inner: 112
Regular: 92
-----------------
 14g100312503-webkamera_kabelell-h5683.html:284:1
Outter: 275
Inner: 275
Regular: 255
-----------------
 14g100312503-webkamera_kabelell-h5683.html:284:1
342

并且第一个div的chrome显示为16。

任何人都可以解释一下，为什么会这样？

不幸的是，我无法向您展示实例。这是一个jsFiddle链接，但在小提琴中，它可以正常工作。

编辑我忘了提到，这是文件中的内联javascript，其中div不是来自.js文件。因为它将它写入控制台，我相信它正在运行。

什么是strage，（我在写这篇文章时意识到这一点），第一次，来电者是jquery.min.js line 2 > eval:19:1，第二次是14g100312503-webkamera_kabelell-h5683.html:284:1

Answer 1

在jQuery Mobile中，为了达到高度，你应该在包含列的特定页面的pageshow事件中运行你的代码：

$(document).on("pageshow","#page1", function(){ 
    var maxHeight = 0;
    var columns = $('.column');
    $.each(columns, function (idx, obj) {
        console.log('Outter: ' + $(obj).outerHeight() + "\nInner: " + $(obj).innerHeight() + '\nRegular: ' + $(obj).height() + "\n-----------------\n") ;
        if ($(obj).outerHeight() > maxHeight) {
            maxHeight = $(obj).outerHeight();
        }
    });
    console.log(maxHeight);
    $.each(columns, function (idx, obj) {
        $(obj).outerHeight(maxHeight);
    });

});

或使用pagecontainer小部件

$(document).on("pagecontainershow", function (event, ui) {
    if (ui.toPage.prop("id") == "page1") {
        var maxHeight = 0;
        ...

更新了 FIDDLE

浮动div的高度在第一次为零，但在第二次确定

1 个答案: