Home/ Questions/Q 7824515
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T08:37:26+00:00

I tried working on this on CSS and jquery but everything fails. Is there

  • 0

I tried working on this on CSS and jquery but everything fails. Is there a default way to ALWAYS keep the data-role page or content to display in 100% HEIGHT?

Every single time i do a portrait mode and the content inside the data-role=”content” is short, it leaves a nasty white space. please see capture attached.

Please help

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>

    JS

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