2

我在玩 Twitter Bootstrap、Leaflet 和 jquery。我有下面的网站。 https://dl.dropbox.com/u/3988632/Site/test.html

我已经四处寻找，找不到让传单地图在 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 文件中的高度设置为 height:100%; 但是保存地图的容器的高度为 0px。

我试过这个 jquery 脚本来调整地图 div 到包含的 div，但没有成功。

//Initial load of page

$(document).ready(sizeContent);

//每次调整窗口大小 $(window).resize(sizeContent);

//动态分配高度 function sizeContent() { var newHeight = $("#container").height()/* - $("#header").height() - $("#footer").height() +“像素”*/；$("#map").css("height", newHeight); }

任何帮助，将不胜感激。

4

1 回答 1

0

据我记得，由于安全原因，我们无法通过 ajax 加载其他网站内容.. 这个其他 stackoverflow 问题可能对您有所帮助..无法使用 jQuery.load 将外部页面加载到我页面中的 div 中

于 2012-11-13T02:24:24.337 回答