Set full content content without overflowing or scrolling with jQuery mobile

I am trying to create a web application using jQuery Mobile. I want to make a navigation page with 4 buttons that fill the whole screen.

I am using the following jQuery to return the height of the screen, divide it by 4, and then apply to each button. I repeat this on orientation change ...

var winHeight = window.innerHeight;
var buttHeight = winHeight / 4;
var winWidth = $(window).width();

$('.fullWidthButton').css({
    height: buttHeight,
    width: winWidth
});

$('.ui-mobile-viewport').css({
    height: winHeight,
    width: winWidth
});
console.log(winHeight);


$('#menu').bind("orientationchange", function () {
    var winHeight = $(window).height();
    var buttHeight = winHeight / 4;
    var winWidth = $(window).width();

    $('.fullWidthButton').css({
        height: buttHeight,
        width: winWidth
    });

    $('.ui-mobile-viewport').css({
        height: winHeight,
        width: winWidth
    });

});

      

This is where the web app is running ... http://mobile.graphitedesign.com/#menu

If you view this on an iPhone, you will notice that at the bottom you see a tiny gray background when you scroll, not the end of the world, but ideally I would like the user not to see this, all the time the menu filling the screen.

If you rotate the screen, jQuery does the job and adjusts the height of the buttons, but now there is a huge gray background. I've tried everything to remove this, but nothing seems to work.

Ideally I would like to disable scrolling completely, but then I lose the address bar.

Any pointers would be grateful!

Thank!

+3


source to share


1 answer


You can try "min-height: 25%";



+2


source







All Articles