在 ASP.NET MVC 4 中使用 jQuery Mobile 1.3 的面板时出现双滚动条答案

【问题标题】：Double scroll bars when using the Panels of jQuery Mobile 1.3 in ASP.NET MVC 4在 ASP.NET MVC 4 中使用 jQuery Mobile 1.3 的面板时出现双滚动条
【发布时间】：2023-03-21 04:45:01
【问题描述】：

我想不通。将以下代码放入布局页面并在浏览器中查看后，我将显示 2 个垂直滚动条。

<div data-role="panel" 
     id="mypanel" 
     data-position="right" 
     data-display="push" 
     data-theme="a">       
</div><!-- /panel -->

【问题讨论】：

你重写了 JQM CSS 类吗？
没有。我不认为这是一个与 CSS 相关的问题。
我收回我的话。 JQM 代码添加了“min-height: ...”，因此解决方案是将“min-height: 覆盖为 0px。谢谢！

标签： jquery jquery-mobile asp.net-mvc-4

【解决方案1】：

遇到了类似的问题，并注意到仅在使用我的自定义主题时。我以错误的顺序将自定义主题添加到页面，这导致了问题。正确的顺序是：

jquery.mobile.CUSTOM.min.css
jquery.mobile.structure-1.3.1.min.css

希望这对其他人也有帮助。

正如@user812775 所述，如果您使用自定义主题，则应仅使用 jquery.mobile.结构.css 而不是完整的 jquery.mobile.css

【讨论】：

从上面可能不是很明显，对于自定义主题，您必须使用“结构”样式表，而不是普通的 jqm 样式表。从这里获取它jquerymobile.com/download。
感谢 user812775 指出这一点。我实际上并不知道这一点，我正在努力解决一些奇怪的 CSS 问题。执行上述步骤并转换为结构文件而不是 jquery-mobile.css 默认修复所有这些。

【解决方案2】：

JQM 代码添加了“min-height: ...”，因此解决方案是将“min-height: 覆盖为 0px”。

【讨论】：

虽然，在使用 data-display="overlay" 时，似乎将 min-height 设置为零会搞砸，因为面板无法打开。

【解决方案3】：

在 jquery.mobile-X.X.X.js 文件中找到这个函数，并将最小高度设置为“100%”，如下所示。我发现当它认为面板不适合页面时，它正在尝试更改页面的最小高度，但这样做有时会弄乱您预设的页面大小并导致双垂直滚动条...因此在函数中将其设置为 100% 将使您的页面保持不变，即使 jquery 尝试调整大小（如果您尚未使用 100% 的页面高度，请将其设置为您使用的大小）。

//simply set the active page's minimum height to screen height, depending on orientation
    resetActivePageHeight: function( height ) {
        var page = $( "." + $.mobile.activePageClass ),
            pageHeight = page.height(),
            pageOuterHeight = page.outerHeight( true );

        height = compensateToolbars( page,
            ( typeof height === "number" ) ? height : $.mobile.getScreenHeight() );

        // Remove any previous min-height setting
        page.css( "min-height", "" );

        // Set the minimum height only if the height as determined by CSS is insufficient
        if ( page.height() < height ) {
            page.css( "min-height", "100%" );
        }
    },

如果您使用的是 jquery.mobile-X.X.X.min.js，这里是您需要更改的功能：

resetActivePageHeight:function(b){var c=a("."+a.mobile.activePageClass),e=c.height(),f=c.outerHeight(!0);b=d(c,"number"==typeof b?b:a.mobile.getScreenHeight()),c.css("min-height",""),c.height()<b&&c.css("min-height","100%")},

【讨论】：