jQuery 移动页面高度 [英] jQuery mobile page height

问题描述

在过去的一天里，我一直在尝试弄清楚在移动 Safari 浏览器中查看时如何更改 jQuery 移动页面上的最小高度样式.我已经尝试过，内联样式，覆盖 ui-page 样式，但还没有找到一种方法来覆盖 data-role="page" 的高度.理想情况下，如果页面内容"小于页面"高度，我希望页面"高度自动调整为内容".我附上了一个插图来更好地解释这个问题.

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.

<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 -->

<div data-role="header">标题元素

<div data-role="content" class="homeNav"><ul data-role="listview" data-inset="false" data-filter="false"><li><a href="expertise.html">专业知识</a></li><li><a href="greatesthits.html">最热门歌曲</a></li><li><a href="profile.html">个人资料</a></li><li><a href="mindset.html">Mindset</a></li><li><a href="connect.html">Connect</a></li>

解决方案

推荐答案

data-role="page" 元素的 min-height 是通过 JavaScript 设置的window 对象的 resize 事件处理程序.您可以创建自己的 JavaScript，以不同方式调整页面大小:

Here is a demo: http://jsfiddle.net/sAs5z/1/

Notice the setTimeout used 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-footer back to the bottom of the page. An example of this can be seen here: http://jsfiddle.net/sAs5z/

这是一个演示:http://jsfiddle.net/sAs5z/1/>

注意用于设置fixed-position-footer的setTimeout；超时持续时间可能会更小.之所以使用它，是因为 jQuery Mobile 框架将 fixed-position-footer 重新定位到页面底部.一个例子可以在这里看到:http://jsfiddle.net/sAs5z/

Another note, you may want to only re-position the fixed-position-footer element and leave the page's min-height property 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/

这篇关于jQuery 移动页面高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！