title: Set size of google map to % of screen size?
body: <p>So I am trying to create a website that will show a location on Google maps. I want to set the map size as a % of the users screen size. This works fine for the width of the map, but when I try and set the height as a % the map vanishes. I tried setting the body to 100% width and 100% height, I tried using a container div, but I'm new to html and CSS, so I'm not sure what else I could try.</p>
  
  <p>CSS for that is here;</p>
  
  <pre><code>#map {
      position: relative;
      width: 35%;
      height: 350px;
      background-color: #CCC;
      margin: 1% 0 0 15%;
      }
  
  #map-container {
      height: 100%;
      width: 100%;
      }
  </code></pre>
  
  <p>The code I used for the map was taken straight from <a href="https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map" rel="nofollow">https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map</a>, but if needed I can upload the full .html doc.</p>