Twitter引導程序，傳單，地圖大小選項卡中的問題

我正在玩Twitter Bootstrap，Leaflet和jquery。我有下面的網站。 https://dl.dropbox.com/u/3988632/Site/test.html Twitter引導程序，傳單，地圖大小選項卡中的問題

我已經挖到周圍，找不到方法讓小葉貼圖在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。

我試過這個jquery腳本來調整地圖div到包含div，但沒有成功。

//Initial load of page

$（document）.ready（sizeContent）;

//每次調整窗口大小 $（window）.resize（sizeContent）;

//動態分配高度功能sizeContent（）{ VAR newHeight = $（「＃容器」）的高度（）/ * - 。$（「＃標題」）高度（） - $（「＃頁腳「）.height（）+」px「* /; $（「＃map」）。css（「height」，newHeight）; }

任何幫助，將不勝感激。

來源

2012-11-12 user1819087

請提供代碼的一個子集，你認爲是造成問題，而不是僅僅鏈接到文件，我們必須去其他地方閱讀和加載。 – Mike

從我記得，我們不能通過Ajax由於安全原因加載其他網站的內容。這個計算器等問題可能是能夠幫助你.. Cannot load an external page with jQuery.load into a div in my page

來源

2012-11-13 02:24:24 Yohn

雖然你可以通過iframe做到這一點，但通過動態設置它的src屬性。仍然需要編寫代碼來調整大小以適應內容。 –

同意..並設置大小不應該很難想出..只需添加自定義CSS在頁面的大小的iframe你的加載 – Yohn

Twitter引導程序，傳單，地圖大小選項卡中的問題

回答

相關問題