2012-11-12 5 views
1

Twitter Bootstrap, Leaflet 및 jquery로 놀고 있습니다. 나는 아래 사이트를 가지고있다. https://dl.dropbox.com/u/3988632/Site/test.htmlTwitter의 부트 스트랩, 전단지, 탭 크기 조정 문제

저는 주위를 파고 있었고 div 컨테이너에서 높이가 100 %가되도록 전단지를 얻을 수있는 방법을 찾을 수 없습니다. 지도 높이가 뷰포트를지나 확장되어 창을 아래로 스크롤하여 헤더를 숨기고있는 것처럼 보입니다. 아래는 부트 스트랩 탭을 구현 한 방법입니다.

<div class="bs-docs-example"> 
     <ul id="myTab" class="nav nav-tabs"> 
      <li class="active"><a href="#home" data-toggle="tab" id="map1">Map</a></li> 
      <li><a href="#profile" data-toggle="tab">Help</a></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Admin <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#dropdown1" data-toggle="tab">User Preferences</a></li> 
       <li><a href="#dropdown2" data-toggle="tab">Setup</a></li> 
      </ul> 
      </li> 
     </ul> 
     <div id="myTabContent" class="tab-content"> 
      <div class="tab-pane fade in active" id="home"> 
      </div> 
      <div class="tab-pane fade" id="profile"> 
      <p>Test Help</p> 
      </div> 
      <div class="tab-pane fade" id="dropdown1"> 
      <p>Test Dropdown1</p> 
      </div> 
      <div class="tab-pane fade" id="dropdown2"> 
      <p>Test Dropdown2</p> 
      </div> 
     </div> 
</div> 

다음지도를 첫 번째 탭에로드하십시오.

<script> 
    $('#home').load('https://dl.dropbox.com/u/3988632/Site/maptest.html');   
</script> 

CSS 파일의 높이를 높이 : 100 %로 설정하면됩니다. 하지만지도를 담고있는 컨테이너는 높이가 0px가됩니다.

지도 div를 포함 div로 조정하려면이 jquery 스크립트를 사용해 보았지만 성공하지 못했습니다.

//Initial load of page 

$ (document) .ready (sizeContent);

// 모든 창의 크기 조정 $ (window) .resize (sizeContent);

// 동적으로 높이를 기능 sizeContent을 할당() { VAR newHeight = $ ("# 용기") 높이()/* -.. $ ("# 헤더") 높이() - $ ("# 바닥 글 ") .height() +"px "* /; $ ("# map"). css ("height", newHeight); }

도움이 될만한 의견이 있습니다. 내가 기억하는 것, 우리는 보안상의 이유로 아약스를 통해 다른 웹 사이트의 내용을로드하지 못할에서

것은
+1

당신이 일으키는 생각하는 코드의 일부를 제공하시기 바랍니다 .. 당신을 도울 수있을 것 문제는, 단지 파일에 링크하는 것 뿐이며, 우리는 다른 곳으로 가서 읽어야하고로드해야합니다. – Mike

답변

0
+0

당신은'iframe'으로 이것을 할 수 있습니다, 설정에 의해 그것은 src 속성을 동적으로합니다. 여전히 콘텐츠에 맞게 크기를 조정하는 코드를 작성해야합니다. –

+0

동의 .. 그리고 크기를 설정해서는 안됩니다 힘들어하지 .. 단지 페이지의 크기에 대한 iframe에 사용자 정의 CSS를 추가로드 – Yohn