Full screen a part of page - html

Question

I have a html code like this:
<header>title</header>
<content class="container-fluid">
<div class="row">
<div class="col-sm-3 leftside">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
<div class="col-sm-9">
<div id="map"></div>
</div>
</div>
</content>
<footer>footer</footer>
I want show the content section of code in one monitor screen.
google map must be full screen (and responsive).
and also side menu must be full screen (for more rows, It must use scroll in it's columns)
how can I do it?
demo code sample
EDIT:
when I open the page by brower, I could see the header and the content (in full screen) and with scroll I can see the footer section.

Answer 1

Here you go... see snippet below. Also here https://jsfiddle.net/darrendiscovr/s1vp1348/ and without Google maps API error.
5 minutes reading the bootstrap docs https://getbootstrap.com/ will get you on the right track and makes learning their components a breeze.
var settingsItemsMap = {
zoom: 12,
center: new google.maps.LatLng(40.768516981, -73.96927308),
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), settingsItemsMap);
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(40.768516981, -73.96927308),
draggable: true
});
map.setCenter(myMarker.position);
myMarker.setMap(map);
nav {
background: red;
color: #fff;
}
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
padding: 20px 0;
overflow-x: hidden;
overflow-y: auto;
border-right: 1px solid #eee;
background: lightblue;
}
main.col-sm-9.ml-sm-auto.col-md-10 {
padding: 0;
}
section.content {
padding: 2em;
height: 100vh;
}
#map {
height: 100vh;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>
<header>
<nav class="navbar fixed-top">
<a class="navbar-brand">
Title
</a>
</nav>
</header>
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-md-2 sidebar">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">...</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">...</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">...</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">...</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">...</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">...</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">...</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">...</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu Last</a>
</li>
</ul>
</nav>
<main role="main" class="col-sm-9 ml-sm-auto col-md-10">
<section class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ante quam, accumsan vitae augue ut, pharetra placerat ligula. Nam sed lorem augue. Donec ipsum velit, mattis sit amet nibh eu, ultrices porta nulla. In dictum ex ligula, eu efficitur metus
pretium et. Aliquam convallis dictum justo in imperdiet. Praesent tincidunt orci et fringilla consequat. Fusce convallis, dolor in mollis gravida, leo risus hendrerit magna, id sagittis nisl tellus quis ex. Mauris rutrum aliquam eleifend. Nullam
dignissim dictum rutrum. Nam tristique mattis nunc nec pretium. Ut at maximus nibh. Donec vel semper sapien, eget semper neque. Maecenas felis magna, condimentum ac ipsum vitae, auctor egestas massa. Nunc vulputate accumsan sem et vehicula.
Nulla ac lorem congue tortor pharetra feugiat. Curabitur lacinia, nisl quis vestibulum convallis, lorem lectus bibendum elit, sed finibus sapien tortor a orci.
</p>
</section>
<section>
<div id="map"></div>
</section>
</main>
</div>
</div>