title: Making the Bing Map API Map responsive
body: <p>I am using Bing Map API v7 and I am trying to make it responsive.  My initial idea was the typical</p>
  
  <pre><code>&lt;div id='mapDiv' style="position:relative; width:100%; height:auto;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The problem is the map disappears completely when I do this.  Any ideas on how to make the map scale down correctly if I can't use height:auto;  The map works fine when I define a height. I am pretty stumped by this.  Not sure what else I can show of my code to try and help but let me know if you need more.</p>
  
  <p>This was the solution I used:</p>
  
  <pre><code>$(window).ready(updateHeight);
  $(window).resize(updateHeight);
  
  function updateHeight()
  {
  var div = $('#mapDiv');
  var menu = $('#mapMenu');
  var headerHeight = $('#header').outerHeight();
  var windowHeight = $(window).height() - $('#header').outerHeight();
  div.css('height', (windowHeight));
  }
  </code></pre>