嵌入Google Maps减去固定的页眉和页脚

Question

我正在尝试使Google地图填充整个内容区域，减去固定的页眉和页脚。

我使用了以下CSS

.google-maps {width: 100%; height: 100%; margin-left:auto; margin-right:auto;}
.google-maps {position: relative; padding-top: 30px; height: 0; overflow: hidden;}
.google-maps iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

和这个脚本来计算填充底，它将定义高度：

<script>
var setHeight = function() {
    var topHeight = $('.regular-header').outerHeight();
    var bottomHeight = $('.sticky-footer').outerHeight();
    var contentHeight = $(window).height() - (topHeight + bottomHeight);
    $('.google-maps').css({'padding-bottom': contentHeight + 'px'});
}

$(window).load(function() {
    setHeight();
});

$(window).resize(function() {
    setHeight();
});
</script>

但我认为我过于复杂，也无法使其正常工作。

我在做什么错？

Answer 1

检查我在a codepen上的解决方案！我已经更改了$（window）.load-> $（window）.on（'load'）

    var resizeTimer;
    var setHeight = function() {
        var topHeight = $('.regular-header').outerHeight();
        var bottomHeight = $('.sticky-footer').outerHeight();
        var contentHeight = $(window).height() - (topHeight + bottomHeight);
        $('.google-maps').css({'padding-bottom': contentHeight + 'px'});
    }

    $(window).on('load', function() {
        setHeight();
    }).on('resize', function() {
      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(function() {
        setHeight();           
      }, 250);   
    });

[此外，如果您习惯使用可调整大小的jQuery UI，那么您将获得可以在调整大小期间绑定的事件，也可以在调整大小结束时绑定到事件。因此，我添加了一个反跳功能。