【发布时间】：2015-06-16 21:06:53
【问题描述】：
我正在尝试纠正最近在我的多页移动应用程序中使用面板对话框触发的错误。随机地，JQuery 似乎缩短了任何给定页面的最小高度，导致黑色页脚 div 向上跳，侧面板缩短。导航到新页面或打开侧面菜单面板时会发生这种情况。
我已尝试按此线程操作 CSS：jQuery Mobile not resizing page correctly
然后尝试使用窗口调整大小事件在此处修复 JavaScript：jQuery mobile page height
但到目前为止，两者都没有奏效。似乎“resize”事件永远不会触发，所以回调永远不会运行。我不确定在使用 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>
【问题讨论】：
标签： javascript jquery css jquery-mobile resize