jQuery 移动页面高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8929786/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery mobile page height
提问by negrelja
For the past day I have been trying to figure out how to change the min-height styling on a jQuery mobile page when viewing in mobile safari. I have tried, inline styles, overriding ui-page styles and have yet to find a way to override the height of data-role="page". Ideally if the page "content" is less than the "page" height I would like the "page" height to automatically adjust to the "content". I have attached an illustration to better explain the issue.
在过去的一天里，我一直试图弄清楚如何在移动 safari 中查看时更改 jQuery 移动页面上的最小高度样式。我已经尝试过，内联样式，覆盖 ui-page 样式，但还没有找到一种方法来覆盖 data-role="page" 的高度。理想情况下，如果页面“内容”小于“页面”高度，我希望“页面”高度自动调整为“内容”。我附上了一个插图来更好地解释这个问题。
<div data-role="page">
<div data-role="header">
Header Elements
</div>
<div data-role="content" class="homeNav">
<ul data-role="listview" data-inset="false" data-filter="false">
<li><a href="expertise.html">Expertise</a></li>
<li><a href="greatesthits.html">Greatest Hits</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="mindset.html">Mindset</a></li>
<li><a href="connect.html">Connect</a></li>
</ul>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
Footer elements
</div><!-- /footer -->
</div><!-- /page -->
采纳答案by Jasper
The min-heightof the data-role="page"element is set via JavaScript in a resizeevent handler for the windowobject. You can create your own JavaScript that resizes the page differently:
在min-height所述的data-role="page"元件被通过JavaScript在设置resize为事件处理程序window对象。您可以创建自己的 JavaScript，以不同方式调整页面大小：
$(function () {
$(window).bind('resize', function (event) {
var content_height = $.mobile.activePage.children('[data-role="content"]').height(),
header_height = $.mobile.activePage.children('[data-role="header"]').height(),
footer_height = $.mobile.activePage.children('[data-role="footer"]').height(),
window_height = $(this).height();
if (content_height < (window_height - header_height - footer_height)) {
$.mobile.activePage.css('min-height', (content_height + header_height + footer_height));
setTimeout(function () {
$.mobile.activePage.children('[data-role="footer"]').css('top', 0);
}, 500);
}
event.stopImmediatePropagation();
}).trigger('resize');
});
Here is a demo: http://jsfiddle.net/sAs5z/1/
这是一个演示：http: //jsfiddle.net/sAs5z/1/
Notice the setTimeoutused to set the fixed-position-footer; the timeout duration can probably be made smaller. This is used because the jQuery Mobile Framework was re-positioning the fixed-position-footerback to the bottom of the page. An example of this can be seen here: http://jsfiddle.net/sAs5z/
注意setTimeout用于设置fixed-position-footer; 超时持续时间可能会更小。之所以使用它，是因为 jQuery Mobile Framework 将fixed-position-footer背面重新定位到页面底部。一个例子可以在这里看到：http: //jsfiddle.net/sAs5z/
Another note, you may want to only re-position the fixed-position-footerelement and leave the page's min-heightproperty the same; this will make the page gradient cover the whole screen but the footer won't have any space between it and the content. Here is a demo of this method: http://jsfiddle.net/sAs5z/2/
另请注意，您可能只想重新定位fixed-position-footer元素并保持页面min-height属性不变；这将使页面渐变覆盖整个屏幕，但页脚和内容之间不会有任何空间。这是此方法的演示：http: //jsfiddle.net/sAs5z/2/
回答by Andy Ray
Old ticket but I have a solution which I prefer more. It specifically unbinds the resize event through some jQuery internals hacking. I don't like Jasper's solution because it depends on one event firing to block another, and events in theory should never know about each other / you should never depend on the order in which events fire.
旧票，但我有一个我更喜欢的解决方案。它通过一些 jQuery 内部黑客攻击专门解除了调整大小事件的绑定。我不喜欢 Jasper 的解决方案，因为它依赖于一个事件的触发来阻止另一个事件，并且理论上的事件永远不应该相互了解/您永远不应该依赖于事件触发的顺序。
$(function() {
// WARNING: Extremely hacky code ahead. jQuery mobile automatically
// sets the current "page" height on page resize. We need to unbind the
// resize function ONLY and reset all pages back to auto min-height.
// This is specific to jquery 1.8
// First reset all pages to normal
$('[data-role="page"]').css('min-height', 'auto');
// Is this the function we want to unbind?
var check = function(func) {
var f = func.toLocaleString ? func.toLocaleString() : func.toString();
// func.name will catch unminified jquery mobile. otherwise see if
// the function body contains two very suspect strings
if(func.name === 'resetActivePageHeight' || (f.indexOf('padding-top') > -1 && f.indexOf('min-height'))) {
return true;
}
};
// First try to unbind the document pageshow event
try {
// This is a hack in jquery 1.8 to get events bound to a specific node
var dHandlers = $._data(document).events.pageshow;
for(x = 0; x < dHandlers.length; x++) {
if(check(dHandlers[x].handler)) {
$(document).unbind('pageshow', dHandlers[x]);
break;
}
}
} catch(e) {}
// Then try to unbind the window handler
try {
var wHandlers = $._data(window).events.throttledresize;
for(x = 0; x < wHandlers.length; x++) {
if(check(wHandlers[x].handler)) {
$(window).unbind('throttledresize', wHandlers[x]);
break;
}
}
} catch(e) {}
});
回答by P-A
I was facing the same issue when showing a popup with an overlay $.mobile.resetActivePageHeight(); did the trick for me. Thanx!
我在显示带有叠加层的弹出窗口时遇到了同样的问题 $.mobile.resetActivePageHeight(); 帮我解决了这个问题。谢谢！
