jQuery Mobile에서 전체 콘텐츠 영역을 차지하도록 콘텐츠 div의 크기를 조절하는 방법

헤더와 콘텐츠 div가 포함 된 간단한 jQuery 모바일 페이지가 시작되었습니다. 콘텐츠 div는 오픈 레이어에 대한지도 컨테이너 역할을해야합니다. 맵은 헤더 바를 제외하고 전체 화면을 채 웁니다.jQuery Mobile에서 전체 콘텐츠 영역을 차지하도록 콘텐츠 div의 크기를 조절하는 방법

너비/높이가 100 % 인 콘텐츠 div의 크기가 조정되지 않았습니다 (아무 것도 표시되지 않음). 따라서 div 또는 상대 크기 해결 방법의 픽셀 크기에 대한 CSS 접근 방식을 찾고 있습니다.

특히 내가 알고 싶은 :

?
레이아웃을 "높이 탄력적"으로, 즉 브라우저의 주소 표시 줄을 바꿀 수 없게하려면 어떻게해야합니까? 여기

내 마크 업 지금까지입니다 :

<body> 

<div data-role="page"> 

<div data-role="header"> 
    <h1>My Map</h1> 
</div> 

<div id="mapcontainer" data-role="content"> 
    <!-- OpenLayers Map goes here -->   
</div> 

</div> 

</body>

출처

2011-01-18 fbuchinger

OpenLayers는 '크기 변경'이벤트를 수신하고 자동으로 map.updateSize()을 호출합니다. 여기서 할게 없어. 내 경우

, 헤더없이, 다음 코드는 작동 :

<div data-role="page" id="map"> 
    <div id="olmap"></div> 
</div> 

#olmap, #map { 
    height: 100%; 
    width: 100%; 
}

출처

2011-01-20 09:54:32 tonio

을 마침내 가공 한 – fbuchinger

당신은 단지 콘텐츠 사업부 모두에 대해 폭 설정을 설정 봤어 그리고 내가 페이지가 될 것입니다 귀하의 경우 추측 사업부를 포함하는거야? 모바일 브라우저에서의 경험은 높이와 너비를 모두 설정하면 전화를 돌릴 때 문제가 발생한다는 것입니다. 아이폰에만 국한되어있다.

출처

2011-01-18 14:05:52 Slick23

나는 아직 그것을 테스트,하지만이 작동하는지 확인하지 않았다 : 여기에 설명 된대로

세트 fulscreen 모드 : http://jquerymobile.com/demos/1.0a2/#docs/toolbars/bars-fullscreen.html

100 %에 #mapcontainer의 폭과 높이를 설정 (및 일부 내용을 넣어 테스트 할 때)

출처

2011-01-19 08:11:48 naugtur

jQuery Mobile에서 전체 콘텐츠 영역을 차지하도록 콘텐츠 div의 크기를 조절하는 방법

답변

관련 문제