Bootstrap: コンテナ内にあるときにGoogleマップが表示されない-流体

作成日 2012年03月09日 · 3コメント · ソース: twbs/bootstrap

やあ、
アプリにナビゲーションバーと100％x 100％のGoogleマップがあります。別のフィルターを使用して右側にサイドバーを追加したいと思います。右側に追加する理由は、小さい画面でのエクスペリエンスが向上するためです。

次のように、最後のナビゲーションバーdivの後にマップを追加すると、マップは流体（％）値でフルスクリーンにレンダリングされます。

地図が表示されます：

    <div class="navbar">
        <nav bar stuff......>
    </div>
    <div id="map-canvas"></div>

スパン内にマップを追加してサイズを制御し、サイドバーを追加しようとすると、マップが表示されません。

    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span9">
                <div id="map-canvas"></div>
            </div>
            <div class="span3">
                <div class="well sidebar-nav">
                    <ul class="nav nav-list">
                        <li class="nav-header">Sidebar</li>
                        <li class="active"><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

流体の目的を損なうので、マップに固定値を追加したくありません。

前もって感謝します！

ソース

fohlsom

最も参考になるコメント

マップの高さが0になるため、これを行うことはできません。たとえば、ウィンドウのサイズが変更されたときにマップキャンバスの高さを手動で設定するjavascriptコールバックを追加する必要があります。

$(window).resize(function () {
    var h = $(window).height(),
        offsetTop = 60; // Calculate the top offset

    $('#map-canvas').css('height', (h - offsetTop));
}).resize();

BenjiZombie 2012年03月09日

👍4

全てのコメント3件

$(window).resize(function () {
    var h = $(window).height(),
        offsetTop = 60; // Calculate the top offset

    $('#map-canvas').css('height', (h - offsetTop));
}).resize();

BenjiZombie 2012年03月09日

👍4

@ BenjiZombie-ありがとう！これで解決しました！

fohlsom 2012年03月10日

ありがとう！ 10の異なる提案の後、これはすばやく簡単に機能します！

rudi911 2012年11月04日

このページは役に立ちましたか？

0 / 5 - 0 評価

Bootstrap: コンテナ内にあるときにGoogleマップが表示されない-流体

最も参考になるコメント

全てのコメント3件

関連する問題