使用 Google Maps API 进行 CSS 定位答案

【问题标题】：CSS positioning with Google Maps API使用 Google Maps API 进行 CSS 定位
【发布时间】：2012-02-01 02:16:06
【问题描述】：

我正在尝试复制网站http://touch.facebook.com，那里有一个侧边菜单，当点击顶部菜单上的按钮时会显示。基本上是侧边菜单 (A)、顶部菜单 (B) 和内容 (C) 的三面板布局，如下所示：

__________________
|   |______B_____|
| A |            |
|   |      C     |
|   |            |
|___|____________|

在我的 HTML 中，我调用 A side_menu、B top_menu 和 C map_canvas。 B 和 C 组合为content。在map_canvas 中，我想放置一个横跨整个屏幕的谷歌地图（比如高度 100% 和宽度 100%）。我想尽可能地拉伸地图，以便在计算机或移动设备上很好地查看此站点。

目前我的 CSS 如下所示：

body
{
    font-family : sans-serif;
    direction   : ltr;
    text-align  : left;
    line-height : 18px;
}

#side_menu
{
    background : none repeat scroll 0 0 #32394A;
    overflow   : hidden;
    position   : absolute;
    min-height : 100%;
    width      : 260px;
}

#content
{
    left        : 260px;
    position    : relative;
}

#top_menu
{
    position         : relative;
    border-color     : #111A33;
    box-shadow       : 0 1px 1px -1px #FFFFFF inset;
    background-color : #385998;
    height           : 29px;
    padding          : 7px 5px;
}

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

但“map_canvas”根本没有出现。我知道如果我专门输入一个固定的高度和宽度，那么它就会出现，但我想将它拉伸到屏幕尺寸。这可能吗？

这是 HTML：

<!DOCTYPE html>
<html>
    <head>
        <link href = "common/css/main.css" rel = "stylesheet" type = "text/css"/>
    </head>
    <body>
        <div id = "side_menu">Side Menu</div>
        <div id = "content">
            <div id = "top_menu">Top Menu</div>
            <div id = "map_canvas"><!-- The Google map goes here --></div>
        </div>
    </body>
</html>

我还注意到，地图加载后，它会添加一些自己的样式：

<div id="map_canvas" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">
    <div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
         <!-- More Google map mumbo jumbo -->
    </div>
</div>

【问题讨论】：

标签： css google-maps

【解决方案1】：

您需要在 CSS 中明确设置 #content 的高度和宽度，因为 map_canvas div 是该元素的子元素。看起来您需要使用绝对和相对宽度/高度的组合、使用边距偏移或基于 JS 的调整大小以确保地图调整到最大范围。

但我会首先验证设置 #content 宽度和高度是否有效（它应该）。

感谢您将术语“mumbo jumbo”纳入 StackOverflow 问题。 :-)

【讨论】：

感谢您的回答。在查看Google Maps CSS 代码后，我意识到没有办法使用纯 CSS 设置相对 100% 的高度。他们似乎正在使用 JavaScript 动态调整 div 的高度。所以答案是给#content加100%的宽度，然后用JS动态设置高度。