避免通过 jquery mobile 添加最小高度答案

【问题标题】：avoid adding min-height by jquery mobile避免通过 jquery mobile 添加最小高度
【发布时间】：2014-12-19 03:27:34
【问题描述】：

我使用 jQuery Mobile 构建了一个 APP，我使用 phoneGap 并且我的 APP 构建在 iframe 中，因为我的平台有一个框架（HP Anywhere）。但是jquery mobile会在我的data-role="page" DIV上添加一个min-height css属性，实际上比设备的最大高度大一个像素，所以它会给我带来一些问题（T_T）。我想知道：jquery mobile 什么时候会在页面 div 上添加这个 CSS 属性？以及如何避免这种情况？非常感谢。

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

jQuery Mobile 在两个事件pageshow (pagecontainershow) 和throttledresize 上设置页面的min-height。它为此调用了resetActivePageHeight 函数。

要覆盖它，请在 pagecontainershow 上进行更改并稍微延迟以确保 resetActivePageHeight 完成。

$(document).on( "pagecontainershow", function ( e, data ) {
   var activePage = data.toPage;

   setTimeout(function () {
      var currentHeight = activePage.css( "min-height" );
      activePage.css( "min-height", currentHeight - 1 ); /* subtract 1px or set your custom height */
   }, 50); /* set delay here */
});

$(window).on( "throttledresize", function ( e ) {
   var activePage = $.mobile.pageContainer.pagecontainer( "getActivePage" );

   setTimeout(function () {
      var currentHeight = activePage.css( "min-height" );
      activePage.css( "min-height", currentHeight - 1 );
   }, 50);
});

【讨论】：

我在我的APP中添加了代码。但 min-height 仍然存在。
@jesse 在这种情况下而不是 activePage.css( "min-height", currentHeight - 1 ); 删除样式 activePage.removeAttr("style"); 或将 min-height 设置为 auto。

【解决方案2】：

我刚刚遇到了这个问题，找到了一个简单的解决方案。

这是由 JQM 计算页面高度引起的，最终得到的答案大于应有的值，然后插入内联 CSS 以强制“页面”的最小高度。当我看到这个时，我从 data-role="page" DIV 一直向上搜索 DOM，寻找任何具有可能影响高度计算的 padding 或 margin 设置的元素。

对我来说，解决方案是覆盖用户代理在 BODY 标签上设置的“边距：8px”。将此设置为零使 JQM 的高度计算正常工作：垂直滚动条消失了，用户在比屏幕短的页面上垂直滚动的能力也消失了。

body {
    margin: 0;
}

也许它不是适合您的 BODY 标记，但您应该检查层次结构中是否有任何可能导致 JQM 绊倒的可疑内容。

【讨论】：

【解决方案3】：

我不确定它是什么时候添加的，但我认为解决方案是设置一个值为 0 的 min-height，因此它的行为就像它不存在一样，同时阻止 CSS 生成它自己的。

【讨论】：

但我认为 jquery mobile 会覆盖min-height。
@jesse jQM 将覆盖它；内联 style 覆盖类。
@Omar 是的，即使在style 中添加 css，jquery mobile 也会覆盖它

【解决方案4】：

对我来说，我通过添加以下 css 完全删除了添加的最小高度。

.ui-page.ui-page-active {
  min-height: auto !important;
}

【讨论】：