javascriptcssjvectormap

jVectorMap height:% does not work


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: enter image description here

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?


Solution

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