6

上部にナビゲーションバーが付いたフルスクリーンのグーグルマップアプリケーションがあります。

だから私はこのような設定をしています：

<div class="navbar">
    <nav bar stuff......>
</div>
<div id="mapcanvas"></div>

mapcanvas要素の高さと幅は100％です。

ただし、mapcanvasはページから溢れ出ているようで、ページ全体がナビゲーションバーの量だけページを下にスクロールする可能性があります。

どうすればそれを修正できますか？

4

1 に答える 1

18

たぶんnavbar-fixed-top、ナビゲーションバークラスに追加してみてください。

<div class="navbar navbar-fixed-top">
    <nav bar stuff......>
</div>

ナビゲーションバーをマップ上に配置したくない場合は、次のように設定し#mapcanvasます（IE7まで機能します-ie6を試していません）

html,body {width:100%;height:100%;margin:0;padding:0;}

#mapcanvas {
    background:red;display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin-top:50px; /* adjust top margin to your header height */
}
<div id="mapcanvas">asdf</div>

于 2013-01-01T19:54:05.763 に答える