Map inside div not responsive when change size

Question

I use this source for my website : http://tympanus.net/codrops/2013/04/23/fullscreen-layout-with-page-transitions/ ,
Download link : http://tympanus.net/Development/FullscreenLayoutPageTransitions/FullscreenLayoutPageTransitions.zip
I's work well.
In the first section (section About). I add this map :

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

I remove anything in div with class "bl-content" in first section and change it to 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>

Map's viewed. But it's not full size. I don't know why. I made any mistake here ?

Answer 1

This is more of a CSS question. Don't place the id on the .bl-content div. That is your container. You want to add a div inside it and give that the map 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>

The class .bl-content is defined as absolute positioning, so we want our map to take up the full space. So add this to your css file.

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

It won't stretch to the edges of the browser without additional work, as the container has a padding assigned to it. But it will fill the entire container.