目前我正在使用 jquery mobile 创建一个 phonegap 应用程序，我遇到了这个问题。当手动为 data-role='page' div 提供 margin-bottom 时，边距在过渡期间消失并在过渡完成时返回。我也想在过渡期间保持利润。请帮帮我。这是我的 HTML 代码:
<body>
<div id='show-back' onclick='goBack();' style='display:none'><div class='back-button'></div></div>
<div id='show-logout' style='display:none' onclick='clickLogout();'><div class='logout-button'></div></div>
<div class='all-area'>
<div class='header-area'>
<div class='header-logo'><img src='img/unic-logo.gif' alt='' style='margin-top:20px' /></div>
</div>
<div class='content-area'>
<div class='content-wrapper'>
<div data-role='page' style='margin-bottom:150px !important;' id='home-page' data-title='University of Nicosia' data-theme='a'>
AREA WHERE THE PAGES TRANSIT....
</div>
</div>
</div>
<div class='menu-area'>
<div class='menu-icon-wrapper'>
<a href='social.html' data-transition='none'><div class='menu-settings'>Settings</div></a>
<a href='social.html' data-transition='none'><div class='menu-global'>Website</div></a>
<a href='social.html' data-transition='none'><div class='menu-chat'>Social Networks</div></a>
<a href='social.html' data-transition='none'><div class='menu-refresh'>Feedback</div></a>
</div>
</div>
</div>
</div>
</body>
如果您在 data-role='page' div 上注意到我包含了指定底部边距的样式定义。
非常感谢您的帮助!
最佳答案
我想通了!我只需要在 data-role='page' div 中创建另一个底部边距的 div，而不是直接给出底部边距。然后我不得不使用 jquery 修复 div 高度。这是代码:
<div data-role='page' id='home-page' data-title='University of Nicosia' data-theme='a'>
<div style='margin-bottom:150px;position:relative;width:100%;overflow-y:auto;overflow-x:hidden' id='content-fixer'>
AREA WHERE THE PAGES TRANSIT....
</div>
</div>
<script>
$(docment).ready(function() {
var contentHeight = $('#home-page').height();
$('#content-fixer').height(contentHeight-150);
});
</script>
关于JQuery 移动页面 div 边距在转换期间发生变化。我该如何预防？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24004030/