jQuery Mobile: Modify DOM when fully loaded to make page 100% in height

Question

I want to make the content area in a jQuery Mobile page stretch so the page is filling 100% of the viewport (header+content+footer=100%). I would assume that I have to do the height alignments when the DOM is fully loaded so I have the heights of all divs and then I can do something similar like this .

jQuery Mobile claims to use pageInit and not $(document).ready . Unforunatelaty the DOM seems not to be fully loaded when pageInit is called as

var header = $("div[data-role='header']")
console.log(header.height());

tells me the height is 0. When I use the same code in $(document).ready() it tells me it is 79px.

So what is the best practice to make the alignments?

Edit:

Here is a jsFiddle that shows the basic structure of my page. I want the canvas to fill the entire space between the header and the footer.

Answer 1

First,create "pageshow" event for your page: (it has to be "pageshow" event and not "pagebeforeshow",because in the second case you won't get the height - page is hidden)

// bind "pageshow" event to your page
$("#PageID").live("pageshow", function (event, data) {
    // do something...       
});

Inside this event,check your header,footer and page sizes (with paddings & margins): Something like:

var header_height = $("div[data-role=header]").height();
var footer_height = $("div[data-role=footer]").height();
var page_height = $("div[data-role=page]").height();

Then, calculate and set the new size of canvas:

$("#MyCanvas").css({"height":page_height - (header_height + footer_height )});

The whole example code:

    // bind "pageshow" event to your page
    $("#PageID").live("pageshow", function (event, data) {
       var header_height = $("div[data-role=header]").height();
       var footer_height = $("div[data-role=footer]").height();
       var page_height = $("div[data-role=page]").height();

       $("#MyCanvas").css({"height":page_height - (header_height + footer_height )});       
    });

Answer 2

I guess that header = [] in your case. But either I don't understand the problem, or I don't understand why javascript is needed. Can't you do it with simple css?

.header{height:20%}
.content{height:60%}
.footer{height:20%}

or something similar

Answer 3

If you're waiting for images (or other external assets) to load then you need to either bind a load event handler directly to the elements/assets or wait for the window.load event so that the assets' dimensions will be correct.

Alternatively you can give the assets specified dimensions, for instance if it's an image and you know it will be 300px by 200px , set those values as attributes or through CSS. This way a correct dimension can be had before the window.load event fires and this works with jQuery Mobile page events better since you can't wait for window.load to fire when a page is brought into the DOM via AJAX.

If you are using an older version than 1.1.0 RC1 then I suggest you check-it-out, it's got CSS fixed footers that look/feel good and make your page appear 100% height all the time. http://jquerymobile.com/blog/2012/02/28/announcing-jquery-mobile-1-1-0-rc1/#download

Answer 4

如果您的目标是填充页眉和页脚之间的空间，您是否考虑过获取data-role="content"的高度？