Vollbild ein Teil der Seite

Question

Ich habe einen HTML-Code wie folgt aus:

<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> 

ich zeigen möchte den Inhalt Codeabschnitt in einem Bildschirm.

Google Karte muss Vollbild (und reaktionsschnell) sein.

und auch Seitenmenü muß Vollbild (für mehr Zeilen, muss sie blättert in seinen Spalten verwenden) sein

wie kann ich es tun?

demo code sample

EDIT:

wenn ich die Seite von Brower öffnet, kann ich den Header und den Inhalt sehen (in Vollbild) und mit Scroll kann ich den Fußbereich sehen.

Answer 1

Hier gehen Sie ... siehe Schnipsel unten. Auch hier https://jsfiddle.net/darrendiscovr/s1vp1348/ und ohne Google Maps API Fehler.

5 Minuten lesen die Bootstrap-Dokumentation https://getbootstrap.com/ wird Sie auf den richtigen Weg bringen und macht das Lernen ihrer Komponenten ein Kinderspiel.

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>