在ASP.NET MVC 4中使用jQuery Mobile 1.3面板时双滚动条
我无法弄清楚这一点。 一旦我将以下代码放在布局页面中并在浏览器中查看它,我就会显示2个垂直滚动条。
有类似的问题,并注意到只有在使用我的自定义主题时。 我将错误订单上的自定义主题添加到页面中,这导致了问题。 正确的顺序是:
jquery.mobile.CUSTOM.min.css jquery.mobile.structure-1.3.1.min.css
希望这也有助于其他人。
如@ user812775所述,如果您使用自定义主题,则只应使用jquery.mobile。 结构 .css而不是完整的jquery.mobile.css
JQM代码添加了“min-height:…”,因此解决方案是覆盖“min-height:to 0px”。
在jquery.mobile-XXXjs文件中找到此函数,并将min-height设置为“100%”,如下所示。 我发现它正在做的是当它认为面板不适合页面时试图改变页面的最小高度,但是这样做有时会弄乱你的预设页面大小并导致双垂直滚动条……所以在函数中将其设置为100%即使jquery尝试resize也会使页面保持相同(如果您还没有使用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-XXXmin.js,则需要更改以下function:
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()