Mapquest window not displaying when using percentages to size div

Question

Trying to display a map on a page at width:100%. When I specify a size in the html

<div id="mapquest" style="width:400px; height:400px">
</div>

The div is all full of sweet map, without any problems. However when I attempt to specify it with a percentage:

<div id="mapquest" style="width:100%; height:auto"> <!--or height:100%, or even height:400px>-->
</div>

The console logs the width of my div in this case as the width of the parent container, but the height is 0.

This also happens when I try to assign the same element style properties in the external CSS stylesheet. Before I drop another hour on troubleshooting, I was wondering if there might be a known reason this doesn't want to work.

Answer 1

So the issue is that the object returned by Mapquest in this case,

(function(){

MQA.EventUtil.observe(window, 'load', function() {

    /*Create an object for options*/
    var mqopts={
      elt:document.getElementById('mapquest'),  /*ID of element on the page where you want the map added*/
      zoom:20,                                  /*initial zoom level of the map*/
      latLng:{lat:39.743943, lng:-105.020089},  /*center of map in latitude/longitude */
      mtype:'map',                              /*map type (map)*/
      bestFitMargin:0,                          /*margin offset from the map viewport when applying a bestfit on shapes*/
      zoomOnDoubleClick:true                    /*zoom in when double-clicking on map*/
    };

    /*Construct an instance of MQA.TileMap with the options object*/
    window.mapquest = new MQA.TileMap(mqopts);
    });
})();

changes the position of the div to relative, and requires a size argument in px, it's default being 0. My understanding is that since it is the last style argument passed to the element on load, it overrides any preceding styles. Now a known issue.