删除html页面中的额外空间

Question

我目前正在为项目实施一个工具，我在主容器底部删除一些额外空间时遇到了一些困难。

基本上，包含图纸列表和地图的容器会在窗口调整大小事件上调整自身大小。底栏是固定的，所以它不会影响任何东西。

$(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);        
}

首次加载页面时，它会正确呈现。然后当缩小它时，我们可以看到一个空间似乎等于原始页面高度和当前页面高度之间的差异。

更改html和body元素的大小并不能解决问题。

使用Google Chrome开发工具，我无法选择该灰色背景。

将主要容器上的margin-bottom更改为负值也不会删除该空格。

有关如何移除此空间的任何线索？

由于

Answer 1

当然，你内部没有一个元素，它延伸到身体之外，并在其上设置了最小高度。当身体收缩到最小高度以下会产生额外的空间时，这会将粘性页脚向下推吗？

查找具有最小高度的所有元素并尝试缩小它们。

Answer 2

  

首次加载页面时，它会正确呈现。然后呢   缩小它，我们可以看到一个似乎等于的空间   原始页面高度与当前页面高度之间的差异。

可能是问题：调整页面大小，请尝试：

$(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);  
    });