jQuery Mobile（JQM）1.4.5页面最小高度将页面高度减小到小于100％
[英]Jquery Mobile (JQM) 1.4.5 Page Min-Height Reduces Page Height to less than 100%
问题描述
我正在尝试纠正最近在多页面移动应用程序中使用面板对话框触发的错误。 随机而言，JQuery似乎会缩短任何给定页面的最小高度，从而导致黑色页脚div跳升，并且侧面板缩短。 导航到新页面或打开侧面菜单面板时，会发生这种情况。
我尝试按照以下线程操作CSS： jQuery Mobile无法正确调整页面大小
然后尝试使用window resize事件在此处进行JavaScript修复： jQuery移动页面高度
但是到目前为止，两个都没有奏效。 似乎“调整大小”事件永远不会触发，因此回调将永远不会运行。 我不确定我可以尝试使用JQuery Mobile触发什么其他事件。
参见jsfiddle进行演示： http : //jsfiddle.net/m8ws6479/
代码在这里：
<body>
<div data-role="page" data-position="fixed" id="page1">
<div data-role="panel" data-display="push" id="menu1" class="menu">
<div class="menulist">
<ul>
<li>
<a href="#page1">Page 1</a>
</li>
<li>
<a href="#page2">Page 2</a>
</li>
<li>
<a href="#page3">Page 3</a>
</li>
<li>
<a href="#page4">Page 4</a>
</li>
</ul>
</div>
</div>
<div data-role="header" class="menubar">
<div class="sidebutton">
<a href="#menu1">Menu1</a>
</div>
</div>
<div data-role="main" class="ui-content">
<div><p>This is page 1</p></div>
</div>
<div data-role="footer" style="width:100%; height:200px; background: black; position:absolute; bottom: 0;"></div>
</div>
<div data-role="page" data-position="fixed" id="page2">
<div data-role="panel" data-display="push" id="menu2" class="menu">
<div class="menulist">
<ul>
<li>
<a href="#page1">Page 1</a>
</li>
<li>
<a href="#page2">Page 2</a>
</li>
<li>
<a href="#page3">Page 3</a>
</li>
<li>
<a href="#page4">Page 4</a>
</li>
</ul>
</div>
</div>
<div data-role="header" class="menubar">
<div class="sidebutton">
<a href="#menu2">Menu2</a>
</div>
</div>
<div data-role="main" class="ui-content">
<div><p>This is page 2</p></div>
</div>
<div data-role="footer" style="width:100%; height:200px; background: black; position:absolute; bottom: 0;"></div>
</div>
<div data-role="page" data-position="fixed" id="page3">
<div data-role="panel" data-display="push" id="menu3" class="menu">
<div class="menulist">
<ul>
<li>
<a href="#page1">Page 1</a>
</li>
<li>
<a href="#page2">Page 2</a>
</li>
<li>
<a href="#page3">Page 3</a>
</li>
<li>
<a href="#page4">Page 4</a>
</li>
</ul>
</div>
</div>
<div data-role="header" class="menubar">
<div class="sidebutton">
<a href="#menu3">Menu3</a>
</div>
</div>
<div data-role="main" class="ui-content">
<div><p>This is page 3</p></div>
</div>
<div data-role="footer" style="width:100%; height:200px; background: black; position:absolute; bottom: 0;"></div>
</div>
<div data-role="page" data-position="fixed" id="page4">
<div data-role="panel" data-display="push" id="menu4" class="menu">
<div class="menulist">
<ul>
<li>
<a href="#page1">Page 1</a>
</li>
<li>
<a href="#page2">Page 2</a>
</li>
<li>
<a href="#page3">Page 3</a>
</li>
<li>
<a href="#page4">Page 4</a>
</li>
</ul>
</div>
</div>
<div data-role="header" class="menubar">
<div class="sidebutton">
<a href="#menu4">Menu4</a>
</div>
</div>
<div data-role="main" class="ui-content">
<div><p>This is page 4</p></div>
</div>
<div data-role="footer" style="width:100%; height:200px; background: black; position:absolute; bottom: 0;"></div>
</div>
</body>
1 个解决方案
解决方案1
0 2015-06-17 09:47:05
将页脚更改为此似乎可以解决跳转问题：
<div data-role="footer" data-position="fixed" data-tap-toggle="false" style="height: 200px; background: black;"></div>
jQuery Mobile .ui页最小高度很大
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.