Question

我正在尝试修复Google Map div，因此它始终可见，但不知何故样式属性“position：fixed”无法正常工作。代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta name="layout" content="main" />
    <style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0px; padding: 0px }
    #map_canvas { height: 100% }
    </style>
      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
      <script type="text/javascript">

           Some script

      </script>
  </head>
  <body onload="initialize()">
     <div class="nav">

            First div

     </div>
     <div id="artistList">

            Second div

     </div>
     <div id="map_canvas" style="position: fixed; right: 0px; top: 0px; width: 100%; height: 100%">

            Map div

     </div> 
  </body>
</html>

有任何帮助吗？非常感谢

Answer 1

这将解决它：

<div id="fixed" style="position:fixed; top:0">
  <div id="map_canvas" style="width:100%; height:100%">
    [map content goes here]
  </div>
</div>

Answer 2

您应该稍微清理一下代码，以使事情更加明显。首先，您应该将css样式设置从map_canvas移动到html头中的css部分。剩下的是干净的<div id="map_canvas"></div>。现在让我们转到html头部的CSS部分。试试这样：

<style type="text/css">
html {}
body {margin: 0px; padding: 10px }
#map_canvas {
    position: fixed;
    right: 0;
    top: 0;
    width: 90%;
    height: 90%;
    border:1px solid #f00;
    margin:10px;
}
</style>

我从height:100%;和html移除了body。我将画布的尺寸从100％缩小到90％，并给它一个红色边框和10px的边距，以使事情更清晰。 div现在位于右上角并且是固定的。我在FF，Chrome，Safari和IE上测试过它。

但是现在有一个小问题......画布100％宽和高是否有意义？！ map_canvas会隐藏你的html中的其他所有内容......？

Answer 3

Najeeb的解决方案对我不起作用。

在＆＃34; tilesloaded＆＃34;之后更改地图元素css（从位置：绝对到位置：固定）地图事件似乎有效。

无法修复Google Map div

3 个答案: