Javascript 更改大小时，div内部的映射没有响应

我将此来源用于我的网站：，
下载链接：
我工作得很好。
在第一部分（关于的部分）。我添加此地图：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
    function initialize() {
        var mapCanvas = document.getElementById('map');
        var mapOptions = {
            center: new google.maps.LatLng(44.5403, -78.5463),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

函数初始化（）{
var mapCanvas=document.getElementById（'map'）；
变量映射选项={
中心：新google.maps.LatLng（44.5403，-78.5463），
缩放：8，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（mapCanvas，mapOptions）
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

我在第一节中删除div中类为“bl content”的任何内容，并将其更改为id:map:

<section>
                <div class="bl-box">
                    <h2 class="bl-icon bl-icon-about">About</h2>
                </div>
                <div id="map" class="bl-content">

                </div>
                <span class="bl-icon bl-icon-close"></span>
            </section>

关于

---

地图已经看过了。但它不是全尺寸的。我不知道为什么。我在这里犯了什么错误？

这更像是一个CSS问题。不要将id放在.bl内容分区上。该分区是您的容器。您希望在其中添加一个div，并为其提供映射id

关于

bl内容被定义为绝对定位，所以我们希望我们的地图占据全部空间。因此，将其添加到css文件中

#地图{
宽度：100%；
身高：100%；
}

如果没有额外的工作，它不会延伸到浏览器的边缘，因为容器有一个指定给它的填充。但它会填满整个容器