6

メインコンテンツとしてヘッダーとフッターの間にgooglemapマップを合わせようとしていますが、マップが100％になり、フッターが押し下げられます。ウィンドウのサイズを変更するとすべてのコンテンツが自動的に調整されるように、それらの間にマップを合わせたいコンテンツをスクロールするための左のバーが表示されませんが、私が見逃しているものがあります。

<html>
    <head>
    <style type="text/css">
html, body, #map-canvas {
    margin: 0;
    padding: 0;
    height: 100%;
}

#wrapper {
    height: auto !important;
    min-height: 100%;
    height: 100%;
    position: relative; /* Required to absolutely position the footer */
}

#footer {
    height: 20px; /* Define height of the footer */
    position: absolute;
    bottom: 0; /* Sit it on the bottom */
    left: 0;
    width: 100%; /* As wide as it's allowed */
}

#content {
    padding-bottom: 20px; /* This should match the height of the footer */
}
    </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        var map;
        function initialize() {
          var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
    </head>
<body>
    <div id="wrapper">
        <div id="header">Header added just for demonstration purposes</div>
        <div id="content"><div id="map-canvas"></div></div>
        <div id="footer">And this is my footer</div>
    </div>
</body>
</html>

よろしくお願いします。

編集済み: ここでは、jsfiddle リンクに少し変更を加えていますが、同じ問題があります。取得しようとすると、ヘッダー、マップ、およびフッターを 1 つのビューで実際には取得できません。マップがプッシュされているため、スクロール バーが表示されます。フッターの下: http://jsfiddle.net/PYaDq/197/

4

2 に答える 2

5

私はこのような問題と戦っていました。鍵は絶対的な位置付けであり、これがあなたが得ようとしているものだと思います:

<html>
    <head>
    <style type="text/css">
        html, body, #map-canvas {
            height: 100%;
            }
        body {
            margin: 0px;
            padding: 0px;
            border: 0;
            outline: 0;
            }
        #header {
            top: 0;
            right: 0;
            left: 0;
            position: absolute;
            }
        #wrapper {
            left: 0px;
            top: 40px;
            bottom: 18px;
            right: 0;
            position: absolute;
        }

        #footer {
            bottom: 0;
            right: 0;
            left: 0;
            position: absolute;
            width:100%;
        }

        #content {
            top: 1px;
            bottom: 0px;
            /*padding-left: 10px;*/
            overflow: auto;
            position: absolute;
            left: 0;
            right: 0;
        }

    </style>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        var map;
        function initialize() {
          var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(-34.397, 150.644),
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
    </head>
<body>
   <div id="header">Header added just for demonstration purposes</div>
    <div id="wrapper">
        <div id="content">
            <div id="map-canvas"></div>
        </div>
    </div>
        <div id="footer">And this is my footer</div>

</body>
</html>

ここでテストできます: http://jsfiddle.net/cespinoza/s6Q4V/

于 2013-04-20T02:05:13.387 に答える
0

オプションとして css3 メディア クエリを検討することを強くお勧めします。一般的な検索では、多くの優れたリソースが見つかります。

メディア クエリは、デバイス (およびブラウザー) の幅を変更することを目的としており、他のスタイル タグと同様の形式を持っています。次のようなものがあるかもしれません：

@media screen and (min-width: 400px) and (max-width: 700px)
{
    #content
    {
    }
}

これにより、指定した境界でスタイル設定が上書きされます。

お役に立てれば。

于 2013-04-19T19:49:19.323 に答える