How to adjust inner div container height to fit with others divs

Question

Please check the demo link I just want to adjust Geomap div's height to 100%. I have tried with this Javascript below but its overflowing with the footer.

function handleResize() {
var h = $('html').height();
        $('#map-geo').css({'height':h+'px'});
}
$(function(){
        handleResize();
        $(window).resize(function(){
        handleResize();
    });
});

Currently my Html and Body css is

html, body {
    font-family: 'Open Sans', sans-serif;
    -webkit-font-smoothing: antialiased;
    height:69% !important;
    width:100% !important;  

}

Please do help me out to make it fit.

Answer 1

as far as i know you should replace :

$('#map-geo').css({'height':h+'px'});

with :

$('#map-geo').css('height',h+'px');

And you also need to put the whole function into :

$( document ).ready(function() {
});

You can try this, if it works for you :

$( document ).ready(function() {
        function handleResize() {
        var h = $('html').height();
            $('#map-geo').css('height',h+'px');
        }
        handleResize();
    });

This alone should resize the element.