CODEWITHSUNDEEP
javascriptjqueryhtmlcss
nicom974
nicom974

Reputation: 176

Removing extra space in html page

I am currently implementing a tool for a project, and I am having some difficulties to remove some extra space at the bottom of the main container.

Screenshot of map page

Basically, the container that contains the drawings-list and the map, resizes itself on window resize event. The bottom bar is fixed, so it does not affect anything.

$(window).on('resize', function () {
    resize();
});

function resize() {
    var height = $(window).height();
    var width = $(window).width();
    var mapHeight = height-260; // 260 for fixed elements
    var mapWidth = width-360; // 360 for left hand side list
    $('.map-drawings-container ul').height(mapHeight);
    $('#map_parent_container > .map').height(mapHeight);
    $('.drawings-list').height(mapHeight);        
}

When the page is first loaded, it renders properly. Then when shrinking it, we can see a space that seems to be equal to the difference between the original page height and the current one.

Changing the size of the html and body element does NOT fix the issue.

Using the Google Chrome Dev tool, I am not able to select that grey background.

Changing margin-bottom to a negative value on the main container does not remove that space either.

Any clue on how to get this space removed?

Thanks

Upvotes: 2

Views: 759

Answers (2)

Ross
Ross

Reputation: 472

Sure you don't have an element inside that extends beyond the body with a min-height set on it. This would push the sticky footer down when the body shrinks below that min-height creating the extra space?

Look for all elements with a min-height and try shrinking them.

Upvotes: 2

EngineerCoder
EngineerCoder

Reputation: 1455

When the page is first loaded, it renders properly. Then when shrinking it, we can see a space that seems to be equal to the difference between the original page height and the current one.

May problem is: resizing the page so try that:

$(window).resize(function(){
        var height = $(window).height();
        var width = $(window).width();
        var mapHeight = height-260; // 260 for fixed elements
        var mapWidth = width-360; // 360 for left hand side list
        $('.map-drawings-container ul').height(mapHeight);
        $('#map_parent_container > .map').height(mapHeight);
        $('.drawings-list').height(mapHeight);  
    });

Upvotes: 0

Related Questions