2017-12-30 59 views
-1

の一部は、私はこのようなhtmlコードを持っている:フルスクリーンページ

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

私は1つのモニタ画面にコードの内容セクションを表示します。

Googleマップは全画面表示(応答)でなければなりません。

と、サイドメニューがフルスクリーン(複数の行のために、それはそれの列にスクロールを使用する必要があります)

私はそれをどのように行うことが可能でなければなりませんか?

demo code sample

EDIT:

私はブラウワーしてページを開いたとき、私はヘッダと(フルスクリーンでの)内容を見ることができましたし、スクロールして、私はフッターセクションを参照してくださいすることができます。

答えて

1

ここでは、下記のスニペットをご覧ください。ここでもhttps://jsfiddle.net/darrendiscovr/s1vp1348/とGoogleマップのAPIエラーなし。

5分でブートストラップのドキュメントを読むと、https://getbootstrap.com/が正しい軌道に乗り、そのコンポーネントを簡単に学習できます。

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>

+0

スタックオーバーフローは、コードの書き込みサービスではありません。この質問は最終的に閉鎖されます。なぜあなたはそれに答える時間を無駄にしていますか? https://stackoverflow.com/help/how-to-answer – Rob

+0

@Rob。私がやっていたとき、私はそれを正確に考えましたが、jsFiddleを変更するのに5分しかかかりませんでした。私は彼らのために自分のサイトを書くのではなく、これをどのように書かなければならないかを見てもらえました。私はこれを数回やりましたが、理由はあまり考えませんでした。 – Darren

+0

私はこれまでに読んだことがあります。私がここに来たものを避けて、あまりにも多くの時間を過ごすだけでした。もう一度やりません! – Darren