navbar and map div takes up the whole screen without scroll - html

Question

I have a web page with a navbar and map div. Everything is great but there is a scroll bar on the page and you must scroll to see the full map. I would like the full map div to show up on the screen without any scrolling. How do I accomplish this? Thank you
HTML:
<nav class="default" role="navigation">
<div class="nav-wrapper">
NTN Trails
<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>Login</li>
<li>Sign up</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;
}
}