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 链接，有一些变化，但同样的问题，如果你试图得到：一个视图中的页眉，地图和页脚实际上你不能，出现滚动条，因为地图正在推动在页脚下方：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 回答