13

Twitter Bootstrap でスタイルを設定し、ナビゲーション バーを使用するページで、ナビゲーション バーの下のコンテナー全体を Google マップ マップで埋めたいと考えました。それを達成するために、以下の CSS を追加しました。

htmlおよび要素のサイズを 100%に定義して、bodyこれがマップのサイズ定義に使用されるようにします。ただし、このソリューションには 1 つの問題があります。

マップの高さがページ全体の高さと同じになり、ナビゲーション バーが追加する 40 ピクセル分スクロールできるスクロール バーが表示されます。100% - 40px地図のサイズをナビゲーション バーに設定するにはどうすればよいですか?

#map {
        height: 100%;
        width: 100%;
}

#map img {
        max-width: none;
}

html, body {
        height: 100%;
        width: 100%;
}

.fill { 
        height: 100%;
        width: 100%;
}

.navbar {
        margin-bottom: 0;
}

完全を期すために、HTML:

<!DOCTYPE html>
<html lang="en">
        <head>
                <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
                <!-- Stylesheets -->
                <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
                <link rel="stylesheet" type="text/css" href="css/core.css">
        </head>
        <body>
                <div class="navbar">
                        <div class="navbar-inner">
                        </div>
                </div>
                <div class="container fill">
                        <div id="map"> 
                        </div>
                </div>
        </body>
</html>
4

1 に答える 1

25

絶対測位で問題を解決できます。

.fill {
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    width: auto;
    height: auto;
}

デモ（jsfiddle）

.navbar-fixed-topナビゲーションバーを作成して、要素内にパディングまたはマージンを追加することもでき#mapます。

于 2012-08-13T08:47:43.893 に答える