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);

//高さ関数を動的に割り当てる sizeContent() { var newHeight = $("#container").height()/* - $("#header").height() - $("#footer").height() + "px"*/; $("#map").css("高さ", newHeight); }

どんな助けでも大歓迎です。

4

1 に答える 1

0

私が覚えていることから、セキュリティ上の理由から、ajaxを介して他のウェブサイトのコンテンツをロードすることはできません..この他のstackoverflowの質問はあなたを助けることができるかもしれません..jQuery.loadを使用して外部ページを私のページのdivにロードすることはできません

于 2012-11-13T02:24:24.337 に答える