Question

更新

请仔细阅读我的jsfiddle代码并提供您的答案，请不要只是简单地将类似问题的答案/链接复制到这篇文章中。正如我之前提到的，这个主题看起来很相似，但是这个问题的原因可能大不相同。

我知道这个问题可能看起来像是多次被问到的一些问题，但是相信我，我已经尝试过从类似问题中找到的任何问题，而且没有一个问题对我有用。

好的，回到我的问题。

我有几个类似的jQuery Mobile页面，我使用它的ui-grid-a，ui-block-a和ui-block-b来使布局响应（希望如此）。但我发现当屏幕高度高于当前活动页面高度时，页面上的单元格/行不会扩展到足以覆盖整个屏幕高度。我已经被困在这个问题已经一周了。请帮忙。

.timeCol, .rightCol {
    min-height : 100% !important;
    line-height: 50px !important; 
    height: 100% !important;
}

以下是jsfiddle代码： http://jsfiddle.net/franva/26We4/22/

从我的HTML和CSS中可以看出，我已经从HTML中移除了任何高度，只将高度放在CSS和高度中：100% !important; min-height:100% !important;

当页面高于屏幕时可以，但我不希望在时间表的最后一行和屏幕底部之间看到一些空白。

更新2

我在我的机器上复制并尝试了Omar的代码，但令人惊讶的是我发现了两个奇怪的地方。

我的显示器分辨率为1920 * 1080，但显示的屏幕高度为248（我猜它是像素）。
每次$(this).find(".ui-content").outerHeight()和$(this).find(".ui-content").height()的值始终为0？

以下是调试pagecreate事件时的变量及其值的列表。

$（“。ui-content”）。height（）：0 “$（this）.find（”。ui-content“）。outerHeight（）”：0 $（this）.find（“。ui-content”）。height（）：0 检查：39 屏幕：248 街区：32 标题：39 contentCurrent：0 内容：209 colHeight：13.0625

现在，我想是因为我把它放错了的地方？（我把代码放在了pagecreate事件中。）但是在奥马尔的代码中，它并没有被置于任何事件中。有什么想法吗？

更新3

我尝试将代码移到document.ready中，如下所示：

  $(function () {

            var blocks = $(this).find(".timeCol").length + $(this).find(".rightCol").length,
            screen = $.mobile.getScreenHeight(),
            header = $(this).find(".ui-header").hasClass("ui-header-fixed") ? $(this).find(".ui-header").outerHeight() - 1 : $(this).find(".ui-header").outerHeight(),
            contentCurrent = $(this).find(".ui-content").outerHeight() - $(this).find(".ui-content").height(),
            content = screen - header - contentCurrent,
            colHeight = content / (blocks / 2),
            check = header + $(this).find(".ui-content").height();

            if (check < screen) {
                $(".timeCol, .rightCol").css({
                    height: colHeight + "px"
                });

                $(".rightCol > div").css({
                    height: (colHeight / 2) + "px"
                });
            }
        })

但它仍然无效。我试图将代码放在pagecreate之外的原因是因为我认为在调用事件的时候，该页面的内容可能不会“填充”到DOM中，所以这就是为什么它始终为0.但现在它是仍然无法正常工作。似乎这个问题变得越来越奇怪了。

Answer 1

在以前的JQM项目中，我也遇到了类似的问题，

它的根源在于JQM页面没有定义基于像素的高度，而是设置在height:99.9%，这使浏览器无法计算其后的相对高度。

我在页面/应用初始化或rotationChange事件中使用这样的代码

viewPortHeight = $(window).height();
$('div[data-role="page"]').css({
    'height': (viewPortHeight) + 'px'
});

从那里你可以给表高度100％，TR和TD将相应地扩展。你将不得不重构你的“桌子”，成为一个真正的桌子。此外，如果您想要静态页眉/页脚，您可能需要在基于像素的数量上设置表格的高度。

旧问题：只有当screenHeight大于页面高度时，如何使jQuery Mobile Page覆盖全屏高度

1 个答案: