嵌入谷歌地图减去固定的页眉和页脚

Question

我试图让谷歌地图填写整个内容区域减去固定页眉和固定页脚。

我使用了以下 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 可调整大小之类的东西，您会获得可以在调整大小期间绑定到的事件，也可以在调整大小结束时绑定。所以，我添加了一个去抖动功能。