强制 data-role="page"无论方向如何，始终保持 100% 高度

发布于 2024-12-28 09:59:34 字数 207 浏览 0 评论 0 原文

我尝试在 CSS 和 jquery 上解决这个问题，但一切都失败了。是否有默认方法始终保持数据角色页面或内容以 100% 高度显示？

每次我使用纵向模式并且 data-role="content" 内的内容很短时，都会留下令人讨厌的空白。请参阅附件中的截图。

请帮忙

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

盛夏已如深秋| 2025-01-04 09:59:34

<div data-role="header" data-position="fixed"></div>
<div data-role="content">
   Content Goes here            
</div>
<div data-role="footer" data-position="fixed" ></div>

data-position="fixed" 将始终使页眉和页脚粘在屏幕的顶部和底部，内容将被重命名区域占用

<div data-role="header" data-position="fixed"></div>
<div data-role="content">
   Content Goes here            
</div>
<div data-role="footer" data-position="fixed" ></div>

data-position="fixed" will always make the header and footer stick to top and bottom of the screen and content will be occupied by the renaming area

回复收藏 0 原文

孤君无依 2025-01-04 09:59:34

您可以使用 jQueryMobile 计算出视口的高度，然后去掉页眉和页脚 div 的高度。剩下的就是您需要的高度。

HTML - 每个页面

<body onload="init()">
    <div data-role="page" id="page" data-theme="a">
        <div data-role="header">
            <h1>Header text</h1>
        </div>
        <div class="page-content">
            <div data-role="content">
                <h1>Content here...</h1>
            </div>
            <div data-role="content">
                <h1>More content here...</h1>
            </div>
        </div>
        <div data-role="footer">
            <h4>Footer text</h4>
        </div>
    </div>
</body>

// Function called when page has loaded
function init() {
  document.addEventListener("deviceready",onDeviceReady,false);
}

// Function called when phonegap is ready
function onDeviceReady() {
    //All pages at least 100% of viewport height
    var viewPortHeight = $(window).height();
    var headerHeight = $('div[data-role="header"]').height();
    var footerHeight = $('div[data-role="footer"]').height();
    var contentHeight = viewPortHeight - headerHeight - footerHeight;

    // Set all pages with class="page-content" to be at least contentHeight
    $('div[class="page-content"]').css({'min-height': contentHeight + 'px'});
 }

You can use jQueryMobile to work out the height of the viewport, then take away the header and footer div heights. You are left with the height you require.

HTML - for each page

<body onload="init()">
    <div data-role="page" id="page" data-theme="a">
        <div data-role="header">
            <h1>Header text</h1>
        </div>
        <div class="page-content">
            <div data-role="content">
                <h1>Content here...</h1>
            </div>
            <div data-role="content">
                <h1>More content here...</h1>
            </div>
        </div>
        <div data-role="footer">
            <h4>Footer text</h4>
        </div>
    </div>
</body>

// Function called when page has loaded
function init() {
  document.addEventListener("deviceready",onDeviceReady,false);
}

// Function called when phonegap is ready
function onDeviceReady() {
    //All pages at least 100% of viewport height
    var viewPortHeight = $(window).height();
    var headerHeight = $('div[data-role="header"]').height();
    var footerHeight = $('div[data-role="footer"]').height();
    var contentHeight = viewPortHeight - headerHeight - footerHeight;

    // Set all pages with class="page-content" to be at least contentHeight
    $('div[class="page-content"]').css({'min-height': contentHeight + 'px'});
 }

回复收藏 0 原文