fix height

Index.html

@@ -74,12 +74,17 @@ <h1>Coffee Shop Locations</h1>
       // Flex does not work properly with google maps to fill remaining height as it would with an image.
       // The header at 50px and 2 borders at 1px each extend the map size beyond 100% by 52px.
       // TODO: change to knockout observables to update when changed.
-      // Set initial height of map to height of map_container - 52px (JQuery method)
-      $('#map').height($('#map_container').height()-52);
-      // set initial height of options-box to itself - 52px (JQuery method)
-      $('.options-box').height($('.options-box').height()-12);
-      // set initial height of header_ma_wrapper to itself - 52px (JQuery method)
-      $('.header_map_wrapper').height($('.header_map_wrapper').height()-52);
+	  function fixHeight() {
+        // Set initial height of map to height of map_container - 52px (JQuery method)
+        $('#map').height($('.container').height()-52);
+        // set initial height of options-box to itself - 52px (JQuery method)
+        $('.options-box').height($('.container').height()-12);
+        // set initial height of header_ma_wrapper to itself - 52px (JQuery method)
+        $('.header_map_wrapper').height($('.container').height()-52);
+	  }
+	  fixHeight();
+	  $(window).resize(fixHeight);
+
     </script>
 
 	<!-- google maps initMap callback script-->