更改大小时，div内的地图没有响应答案

【问题标题】：Map inside div not responsive when change size更改大小时，div内的地图没有响应
【发布时间】：2016-02-18 07:37:44
【问题描述】：

我将此来源用于我的网站：http://tympanus.net/codrops/2013/04/23/fullscreen-layout-with-page-transitions/，
下载链接：http://tympanus.net/Development/FullscreenLayoutPageTransitions/FullscreenLayoutPageTransitions.zip
我的工作很好。
在第一部分（关于部分）。我添加了这张地图：

<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>

我在第一部分删除了类“bl-content”的 div 中的任何内容，并将其更改为 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>

地图已查看。但它不是全尺寸的。我不知道为什么。我这里有什么错误吗？

【问题讨论】：

标签： javascript css dynamic responsive-design zooming

【解决方案1】：

这更像是一个 CSS 问题。不要将 id 放在 .bl-content div 上。那是你的容器。您想在其中添加一个 div 并为其提供地图 ID。

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

.bl-content 类被定义为绝对定位，所以我们希望我们的地图占据整个空间。因此，将其添加到您的 css 文件中。

#map {
    width: 100%;
    height: 100%;
}

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

【讨论】：