删除 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);  
    });