navbar和map div占用整个屏幕而不滚动

Question

我有一个带有导航栏和地图div的网页。一切都很棒，但页面上有一个滚动条，你必须滚动才能看到完整的地图。我希望完整的地图div显示在屏幕上而不进行任何滚动。我该如何做到这一点？谢谢

HTML：

<nav class="default" role="navigation">
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo center">NTN Trails</a>
    <a href="#" data-activates="mobile-demo" class="button-collapse show-
      on-large"><i class="material-icons">menu</i></a>
    <ul class="right hide-on-med-and-down">       
    </ul>
    <ul class="side-nav" id="mobile-demo">
      <li><a href="#">Login</a></li>
      <li><a href="#">Sign up</a></li>
    </ul>
  </div>
</nav>
<script>
  $('.button-collapse').sideNav({
  menuWidth: 240, // Default is 240
  edge: 'left', // Choose the horizontal origin
  closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
  }
  );
</script>
<!--put your initial page content here-->
<div id="map"></div>

CSS：

html, body, #map {
     height: 100%;
     width: 100%;
}
@media only screen and (min-width: 993px){
     nav a.button-collapse {
         display: block;
    }
}