The old issue: how to make jQuery Mobile Page cover the full screen height only when screenHeight is greater than page height

Question

Update:

Please do read through my jsfiddle code and than provide your answers, please do not just simply copy a answer/links of similar questions to this post. As I mentioned before, the topic looks similar, but the causes of this problem may be quite different.

---

I know this question might look like some questions which have been asked many times, but trust me, I have tried whatever I have found from the similar questions and none of them works for me.

Okay, back to my question.

I have several similar jQuery Mobile pages, and I use its ui-grid-a, ui-block-a and ui-block-b to make the layout responsive(hopefully). But I found that when the screen height is higher then the current active page height, the cells/rows on the pages do not expand high enough to cover the full screen height. I have been stuck on this issue a week already. Please help.

.timeCol, .rightCol {
    min-height : 100% !important;
    line-height: 50px !important; 
    height: 100% !important;
}

Here is the jsfiddle code at: http://jsfiddle.net/franva/26We4/22/

As you can see from my HTML and CSS, I have removed any height from HTML and only put the height in CSS and height: 100% !important; min-height:100% !important; 100% !important; min-height:100% !important;

It's okay for when a page is higher than the screen, but I do not want to see some blank space between the last row of the timetable and the bottom of the screen.

Update 2

I copied and tried Omar's code on my machine, but surprisingly I found 2 strange places.

1. My Monitor resolution is 1920 * 1080, but the screen height shown was 248(I guess it's pixels).
2. Everytime, the value of $(this).find(".ui-content").outerHeight() and $(this).find(".ui-content").height() are always 0?!

Here are a list of variables and their values when debugging to the pagecreate event.

$(".ui-content").height(): 0 " $(this).find(".ui-content").outerHeight()": 0 $(this).find(".ui-content").height(): 0 check: 39 screen: 248 blocks: 32 header: 39 contentCurrent: 0 content: 209 colHeight: 13.0625

Now, I'm thinking is it because of the place where I put it is wrong?(I put the code inside the pagecreate event.) But in Omar's code, it's not put into any event. Any thoughts?

Update 3

I tried to move the code into document.ready like below:

  $(function () {

            var blocks = $(this).find(".timeCol").length + $(this).find(".rightCol").length,
            screen = $.mobile.getScreenHeight(),
            header = $(this).find(".ui-header").hasClass("ui-header-fixed") ? $(this).find(".ui-header").outerHeight() - 1 : $(this).find(".ui-header").outerHeight(),
            contentCurrent = $(this).find(".ui-content").outerHeight() - $(this).find(".ui-content").height(),
            content = screen - header - contentCurrent,
            colHeight = content / (blocks / 2),
            check = header + $(this).find(".ui-content").height();

            if (check < screen) {
                $(".timeCol, .rightCol").css({
                    height: colHeight + "px"
                });

                $(".rightCol > div").css({
                    height: (colHeight / 2) + "px"
                });
            }
        })

But it still doesn't work. The reason why I tried to put the code outside pagecreate was because I thought by the time when the event is called, the content of that page might not be "filled in" to the DOM, so that's why it's always 0. But now it's still doesn't work. Seems like this question has become more and more weird.

Answer 1

In previous JQM projects I've also had a similar issue,

The root of it begins with the fact that JQM pages do not have a pixel-based height defined but are rather set at height:99.9% which makes it impossible for the browser to calculate relative heights thereafter.

I use such a code at the page/app initialization or rotationChange event

viewPortHeight = $(window).height();
$('div[data-role="page"]').css({
    'height': (viewPortHeight) + 'px'
});

From there on you can give a table a height of 100% and the TR and TD's will expand accordingly. You will have to refactor your "table" to become a true table. Also you may need to set the height of the table on a pixel based amount if you want to have static headers/footers.