OpenLayers지도 컨테이너의 크기 설정

Question

저는 Bootstrap navbar와 OpenLayers지도가있는 기본 HTML 레이아웃을 가지고 있습니다.

JS Fiddle here.

HTML은 다음과 같습니다 : 그것은지도 DIV의 아래쪽을 밀어 난 전체지도를보고 조금 아래로 스크롤해야하기 때문에

<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Title</a> 
    </div> 
    </div> 
</nav> 

<div id="map" class="map"></div> 

문제는 네비게이션 바있다. 아래 그림과 같이 스크롤 영역이 생기지 않도록 보이는 화면 범위에만 맵을 어떻게 든 제한 할 수 있습니까? 여기

내가 acomplish 노력하고있어 좋은 예이다 : http://jumpinjackie.github.io/bootstrap-viewer-template/2-column/index.html

Answer 1

당신은 당신의 코드에이를 추가 할 수 있습니다

:

#map { 
    height: calc(100vh - 52px); /* 100% of the viewport height - navbar height */ 
}