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