failing to set div value height to fit the remaining space

Question

I'm using JQuery and JQuery-Mobile to show a simple UI with a header and a map. I want the map to fit the whole screen, so its height is set to the height of the window minus the height of the header.

My javascript is simple:

$(document).ready(function () {
    var maxWidth = $(window).width();
    var maxHeight = $(window).height();

    var headerHeight = $('#header').outerHeight(true);
    var heightMap = maxHeight - headerHeight;
    $('#map').css("height",heightMap);

The same lines are in the $(window).resize() function.

The map is well resized when the screen size changes, but the first time I load a page, in landscape, it's about 10 pixels heigher. How can I solve this?

Don't use `.ready()` in JQM, use page events. http://stackoverflow.com/questions/21552308/set-content-height-100-jquery-mobile/21553307#21553307 — Omar, Mar 11 '14 at 09:09
Thanks, I solved by using $.mobile.getScreenHeight(); as I saw in your code! Now, I just have to fix the background size that is still bigger than the screen: I tried to resize the .ui-content and the body, but I still have a page bigger than screen size. Do you know what is the element that I have to modify? — user3098549, Mar 11 '14 at 09:58

score 0 · Answer 1 · answered Mar 11 '14 at 08:06

0

Use like this:

$(window).on('load resize',function(){
//your code in here
});

answered Mar 11 '14 at 08:06

Bhojendra Rauniyar

83,432
35
168
231

Adding to this, the reason is, `.ready` is called when the Dom is ready, `.load` is called when all contents are downloaded. – SajithNair Mar 11 '14 at 08:11
1

Unfortunately, it does not change anything – user3098549 Mar 11 '14 at 08:40

failing to set div value height to fit the remaining space

1 Answers1