Leaflet: 지도 div는 100% 높이 CSS 속성을 지원하지 않습니다.

JSFiddle은 어떤 이유로 열리지 않지만 Leaflet은 문제 없이 100% 높이를 지원합니다. 아마도 뭔가 잘못하고 있는 것 같습니다. http://leafletjs.com/examples/mobile.html 참조

내가 틀렸어. body 태그에 height 속성을 설정하지 않았습니다. 감사 해요

$(window).on("resize", function () { $("#map").height($(window).height()); map.invalidateSize(); }).trigger("resize");

이 코드를 사용하여 창의 반응형 높이로 만듭니다.

위의 Omgan의 의견은 전단지 1.0.2에서 저에게 효과적이었습니다.
다음과 같은 작은 변경 사항을 추가했습니다.
.height() - 220);
이것은 내가 사용하고 있는 메뉴에 대한 정렬을 조정하는 데 도움이 되었기 때문입니다. 또한 문제를 해결하기 위해 사용하려는 CSS를 모두 제거해야 했습니다.

이것은 완벽하게 작동하지만 설정은 (- 40)과 함께 작동했습니다.
$(window).on("크기 조정", function () { $("#map").height($(window).height()-40); map.invalidateSize(); }).trigger("크기 조정 ");

나는 Omgan, dstrickler, josejaner가 한 일을 따랐습니다. 또한 별도의 함수 initMap()에서 내 지도를 초기화했기 때문에 아래와 같이 크기 조정을 트리거해야 했습니다.

function initMap() { map = L.map('mapid').setView([40.060620, -77.523182], 17); L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { maxZoom: 18, id: 'streets-v9', accessToken: 'xxxxx' }).addTo(map); tilesLoaded = true; $("#mapid").trigger("resize") }

아래와 같이 CSS에서 높이 사용:

#map { height: calc(100% - 44px); width: 100%; position: absolute !important; }
전체 화면은 제대로 작동하지만 경계가 더 이상 올바르게 작동하지 않습니다. 모든 마커가 표시되지 않습니다. 그러나 높이를 800px로 설정하면 경계가 제대로 작동합니다.

@stripathix 이것이 문제라고 생각한다면 문제를 설명하는 명확한 예와 함께 새 항목을 여는 것이 좋습니다.

귀하가 제공한 정보를 감안할 때 이것은 전단지 문제일 가능성이 거의 없지만 애플리케이션에서 이를 사용하는 방식에 관한 문제인 것 같습니다. 예를 들어 지도가 초기화된 후 지도 컨테이너의 크기가 _변경_하는 경우 지도 인스턴스에서 invalidateSize 를 호출해야 합니다.

높이가 100% 작동하도록 고정 또는 절대 위치로 설정된 래퍼 컨테이너를 사용합니다.
예

.map-wrapper { width: 100%; height:100%; position: fixed;}
#map { width: 100%; height:100%; position: relative;}

https://jsfiddle.net/robertpribpolestar/xg41w12v/3/ 참조

물론 이는 성가실 수 있는 고정 및 절대 위치 지정을 사용해야 함을 의미하지만 브라우저 크기 조정을 보면서 JS에 포함하는 것보다 낫습니다.

제 경우에는 이 CSS가 문제를 해결합니다.

#map{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

컨테이너에 position: relative 를 제공합니다.
vw 및 vh 를 사용하여 컨테이너도 반응형으로 만들 수 있습니다.

@dhanyn10 position: absolute; 이 트릭을 수행했습니다!

$(window).on("resize", function () { $("#map").height($(window).height()); map.invalidateSize(); }).trigger("resize");

이 코드를 사용하여 창의 반응형 높이로 만듭니다.

그것에 대한 완벽하게 작동하는 해킹, 나는 지난 몇 시간 동안 이러한 종류의 솔루션을 찾았지만 마침내 찾았고 정말 행복합니다. 응답성도 테스트했는데 정확합니다.

오 FFS는 100vh 를 사용합니다. 그리고 vh 및 vw 에 대한 https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units 및 $ 100% 의 정확한 의미를 읽으십시오.