jVectorMap height:% does not work

Question

I am using this library: http://jvectormap.com/ to create a Map for my website. I am attempting to set the width and height of the map to 100% through the style attribute to make the map display at full-screen size.

When I specify the following:

<div id="map1" style="width: 100%; height: 100%"></div>

The map displays as follows:

The width attribute appears to work correctly, however the height attribute does not. When I resize the window, the width scales correctly, whereas the height appears to scale up constantly regardless of whether I scale the image up or down.

How can I make the map appear with a specified scale using a percentage?

Answer 1

Try this in your CSS:

head {
    height:100%;
}
#map1 {
    position:absolute;
    height:100%;
}

Setting the height of the head element to 100% sets the definition for what the map height will be.