目前我正在使用jquery mobile创建一个phonegap应用程序,我遇到了这个问题。当手动为data-role ='页面提供一个margin-bottom时。 div,转换期间边距消失,转换完成后返回。我想在过渡期间保留保证金。请帮帮我。这是我的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 =&#39;页面&#39; div我包含了指定底部边距的样式定义。
感谢您的帮助!
答案 0 :(得分:0)
我明白了!我只需要在data-role =&#39; page&#39;中创建另一个带底部边距的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>