2017-12-30 17 views
-1

의 일부가 나는이 같은 HTML 코드를 가지고있다.전체 화면 페이지

Google지도는 전체 화면이어야합니다 (반응 형).

또한 사이드 메뉴 전체 ​​(더 행에 대해, 그것은 그것의 열에서 스크롤을 사용해야합니다) 화면해야

내가 어떻게 할 수 있습니까?

demo code sample

편집 :

내가 브라 우어하여 페이지를 열 때, 내가 헤더와 (전체 화면) 콘텐츠를 볼 수 있으며, 스크롤와 내가 바닥 글 섹션을 볼 수 있습니다.

답변

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