Angular google map fill space
<p>I am trying to use an Angular Google Map inside of a web application that is using Bootstrap for styling. Right now I am just trying to get a basic example working that shows a webpage consisting of a navigation bar and a google map (using Angular's <code>ui-gmap-google-map</code> element) that takes up all of the remaining space. However, I cannot get the Google Map to have anything other than a fixed height that does not account for the sizes of other elements on the screen.</p>

<p>Below is my code:</p>

<p><strong>mapSandbox.html</strong></p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html ng-app="myApp" lang="en" ng-controller="myCtrl"&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;title&gt;Welcome&lt;/title&gt;

    &lt;!--CSS--&gt;
    &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;link href="css/style.css" rel="stylesheet"&gt;


    &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
    &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
    &lt;!--[if lt IE 9]&gt;
     &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
     &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
&lt;![endif]--&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;nav class="navbar navbar-default navbar-static-top"&gt;
    &lt;div class="container"&gt;
        &lt;div class="navbar-header"&gt;
            &lt;a class="navbar-brand" href="#/"&gt;
            BRAND GOES HERE
            &lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/nav&gt;

&lt;!-- 'container-fluid' was an attempt to make the division use the full width --&gt;
&lt;div id="main" class="container-fluid"&gt;

    &lt;!-- THIS IS WHAT NEEDS TO FILL THE REMAINING SPACE --&gt;
    &lt;ui-gmap-google-map center="map.center" zoom="map.zoom" control="map.control"&gt;&lt;/ui-gmap-google-map&gt;

    &lt;h1&gt;Other content here&lt;/h1&gt;

&lt;/div&gt;

&lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
&lt;script src="https://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
&lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
&lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"&gt;&lt;/script&gt;
 &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/lodash.min.js"&gt;&lt;/script&gt;
&lt;script src="js/angular-google-maps.min.js"&gt;&lt;/script&gt;
&lt;script src="js/angular-simple-logger.js"&gt;&lt;/script&gt;
&lt;script src="js/mapSandbox.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>js/mapSandbox.js</strong></p>

<pre><code>// Initialize angular
var app = angular.module('myApp', ['uiGmapgoogle-maps']);

app.controller('myCtrl', function($scope) {
    $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
})
.config(function (uiGmapGoogleMapApiProvider) {
      uiGmapGoogleMapApiProvider.configure({
          key: '{KEY IS HERE}',
          v: '3.22',
          libraries: 'weather,geometry,visualization'
      });
});
</code></pre>

<p><strong>css/style.css</strong></p>

<pre><code>.angular-google-map-container {
    height: 100%;
}
html, body {
    height: 100%;
    width: 100%;
    margin: 0px;
}
</code></pre>

<p>I am aware that this is a <em>really</em> common question; however, none of the proposed fixes that I have work. I have looked at the following solutions and address my problem:</p>

<ul>
<li>The <a href="http://angular-ui.github.io/angular-google-maps/#!/use" rel="nofollow">official Angular tutorial</a> indicates that something like <code>.angular-google-map-container { height: 400px; }</code> should be used. This is not what I want as this is a fixed size and does not fill the remaining space.</li>
<li>Using <code>.angular-google-map-container { height: 100vh; }</code> is close except it does not take into account anything else that is already there (like the navigation bar). As a result the entire page length becomes 100% of view height + the height of all other items (which results in a scroll bar).</li>
<li>Using <code>.angular-google-map-container { height:100%; width:100%; position:absolute; top:0; left:0; }</code>  (see <a href="https://github.com/angular-ui/angular-google-maps/issues/287" rel="nofollow">here</a>) was the closest I got and <em>looks</em> like it does the right thing. <strong>However,</strong> under closer inspection it is clear that something is really screwed up and this is just a hack. For example, Chrome's inspection tools show that the divisions that contain the <code>.angular-google-map-container</code> (e.g. <code>#main</code>) have zero height even though their child (the map element in question) is huge. Also, the map takes up the entire webpage (the navbar appears to be given a z order that puts it on top of the map) instead of just taking up the remaining space.</li>
</ul>

<p>I apologize if this is a stupid question, I find myself banging my head against everything in sight whenever I have to do any CSS work. Doing something similar with Swing, Android, etc. is so trivially easy that I would expect that there is a similarly easy way to do this here.</p>

<p><a href="http://jsbin.com/nozive/edit?html,js,output" rel="nofollow">Here</a> is a test for this.</p>