浮动 div 的高度第一次为零，但第二次正常

Question

我有一个 jQuery mobile 站点，我想显示三个浮动 divs。

因为我不知道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世界总有惊喜。

当我第一次下载页面时，divs 只是显示填充的高度，并且在控制台中有很奇怪的东西。

页面刷新后，一切正常，如我所料。

如果这还不够，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

而 chrome 显示第一个 div 为 16。

谁能解释一下，为什么会这样？

很遗憾，我无法向您展示实际示例。这是 jsFiddle link，但在 fiddle 中有效。

EDIT 我忘了提到，这是文件中的内联 javascript，其中 div 不是来自 [=15] =] 文件。因为，它将它写入控制台，我敢肯定，它是运行.

还有什么是strage，（写这个的时候才意识到post），第一次是jquery.min.js line 2 > eval:19:1，第二次是14g100312503-webkamera_kabelell-h5683.html:284:1

Answer 1

在 jQuery 移动设备中，要获得高度，您应该运行您在包含列的特定页面的 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;
        ...

Updated FIDDLE

浮动 div 的高度第一次为零，但第二次正常

Height of floating divs are zero at first time, but ok at second time

jquery

jquery-mobile