JQuery Mobile: changing the DOM at full load to make the page 100% high

Question

I want the content area on the jQuery Mobile page to stretch so that the page fills 100% of the viewport (header + content + footer = 100%). I would suggest that I need to perform height alignment when the DOM is fully loaded, so I have the heights of all divs, and then I can do something like this like this .

jQuery Mobile claims to use pageInit, not $ (document) .ready . The Unforunatelaty DOM does not seem to be fully loaded when pageInit is called as

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

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

So what is the best practice for leveling?

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

Answer 1

I think header = [] in your case. But either I do not understand the problem, or I do not 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 2

If you expect images (or other external assets) to load , you either need to bind the load event handler directly to the elements / assets, or wait for the window.load event to make the asset sizes correct.

Alternatively, you can specify the assets specified in the parameters, for example, if it is an image, and you know that it will be 300px by 200px , set these values ​​as attributes or through CSS. Thus, before the window.load event occurs, the correct measurement can be performed, and this works better with jQuery Mobile page events, since you cannot wait for window.load light up when the page is transferred to the DOM via AJAX.

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

Answer 3

If your goal is to fill in the gap between the header and footer, do you think the height is data-role="content" ?

Answer 4

First, create a "pageshow" event for your page: (this should be a "pageshow" event, not a "pagebeforeshow", because in the second case you will not get the height - the page is hidden)

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

Inside this event, check the size of the header, footer and page (with paddings and 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 canvas size:

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

All sample 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 )}); });