11

전단지 맵의 높이를 부트 스트랩 내부의 백분율로 변경하려고 시도했지만 매번 맵을 그릴 때마다 그리지 않습니다. 따라서 항상 px 값으로 되돌려 야합니다. CSS 초보자이기 때문에 누락 된 간단한 설정이 확실합니다. 여기 내 CSS가 있습니다.

<style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
  #map {
    height: 75%;
  }
</style>

web-mapping leaflet bootstrap-framework

— njackson.gis
소스

3

자세한 정보를 제공해주세요. 마크 업은 어떻게 보입니까? 문제를 보여주는 최소한의 예를 만들 수 있습니까?

— atlefren

12

지도 너비가 100 % 높이로 변경 될 때 (그러나 상단에 탐색 막대가 있음) 상단의 여백이 다를 수 있기 때문에 항상 부트 스트랩의 맵 높이에 문제가 있습니다.

var mapmargin = 50;
$('#map').css("height", ($(window).height() - mapmargin));
$(window).on("resize", resize);
resize();
function resize(){

    if($(window).width()>=980){
        $('#map').css("height", ($(window).height() - mapmargin));    
        $('#map').css("margin-top",50);
    }else{
        $('#map').css("height", ($(window).height() - (mapmargin+12)));    
        $('#map').css("margin-top",-21);
    }

}

추악하지만 작업이 완료됩니다.

— 칼뱅
소스

6

[2020 업데이트]

2020/02/23 현재 Flexbox는 브라우저 지원 이 95 % 이며 flex-grow 속성을 사용하여 Leaflet을 반응 형으로 만들 수있는 훌륭한 옵션입니다.

여기에서 CodePen 데모보기

Flexbox를 지원하지 않는 브라우저에서 계속 렌더링되도록 설정되어 있으므로 해당 사용자는 약간 스크롤해야합니다.

¯ \ _ (ツ) _ / ¯

===================================================== ==========

[오래된 포스트]

이것은 나를 위해 일했습니다.

참고 : 큰 화면에서지도의 너비가 100 %가되지 않기를 원했기 때문에 추가했습니다.

.container{max-width:60em;} /* Remove for full screen */

HTML

<div id="map-holder">
  <div class="container fill">
    <div id="map"></div>
  </div>
</div>

CSS

#map
{
    width: 100px;
    height:100px;
    min-height: 100%;
    min-width: 100%;
    display: block;
}

html, body
{
    height: 100%;
}

#map-holder{
    height: 100%;
}

.fill
{
    min-height: 100%;
    height: 100%;
    width: 100%;
    max-width: 100%;
}

.container{
    max-width:60em;
    padding: 0.2em;
}

— 트리스탄 포워드
소스

1

나를 위해 일했다. 실제로 가장 좋은 답변

— g07kore

5

문제는 #map자식의 문제이며 body부모의 요소에 높이가 명시 적으로 정의되어있는 경우 자식 요소의 백분율 높이 만 지정할 수 있습니다.

<style type="text/css">
    body {
        padding-top: 60px;
        padding-bottom: 40px;
        height: 480px;
        }
    #map {
        height: 75%;
        }
</style>

이렇게하면 원하는 것을 만들 수 있지만 사용 가능한 영역은 480px의 75 %보다 커지지 않습니다. 일반적으로 div컨텐츠가없는 경우 축소되지만 Leaflet에서는 맵이 맵에 있어도 div렌더링시 계산되지 않으므로 렌더링시 축소됩니다. 내용이 모든 수직 공간을 차지하도록하려면 일부 자바 스크립트를 사용하여 페이지로드시 창 크기를 쿼리하고 높이를 설정할 수 있습니다.

— RomaH
소스

3

높이를 정의 하고 참조로 사용할 수 있도록 및 태그 에 a height:100%를 추가하기 만하면 작동합니다.htmlbody

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Height sample</title>
<style type="text/css">
    html, body { 
        height:100%
    }
    #map {
        margin: 1em auto;
        height:70%;
        border: 2px dashed black;
    }                                                                                                                                                                                                            
</style>
</head>
<body>
    <h1>The map</h1>
    <div id="map"></div>
</body>
</html>

참고 문헌 :

Stackoverflow의 관련 질문 : 백분율 높이 HTML 5 / CSS
당신은 또한에 봐 줄 수있는 W3C의 CSS 2.1 표준 볼 수있는 박스 모델 에 대한 및 일부 계산 높이와 여백을

— pconcepcion
소스

1

이것이 갈 길입니다.

— George Silva

1

경고! 브라우저 간 테스트 후 아래 답변이 Firefox에서만 작동하는 것이 아니라 Chrome에서만 작동한다는 것을 알았습니다.

저도 같은 문제를 겪고 표시와 함께이 고정 : 테이블을 각 사업부 덕분에 주요 사업부와 디스플레이 테이블 셀에 유래에이 대답 :

<div class="container body-container">

  <div class="col-md-6 side-container">
    <p>some stuff to</p>
    <p>fill the</p>
    <p>first colum</p>      
  </div><!-- /other column -->
  <div class="col-md-6 side-container">
    <div id="map"></div>
  </div><!-- /leaflet column -->
</div><!-- /container -->

그리고 CSS :

.body-container {
    display: table;
}
.side-container {
  float: none;
  display: table-cell;
  height:0;
}
#map {
    height: 100%;
}

— RvdBerg
소스

부트 스트랩 내부의 크기 책자지도

참고 문헌 :