使用 Google Maps API 进行 CSS 定位
我正在尝试复制网站 http://touch.facebook.com，他们有一个侧面菜单单击顶部菜单上的按钮时显示。基本上是侧面菜单 (A)、顶部菜单 (B) 和内容 (C) 的三面板布局，如下所示：
__________________
| |______B_____|
| A | |
| | C |
| | |
|___|____________|
在我的 HTML 中，我调用 A side_menu, B top_menu 和 C map_canvas。 B 和 C 组合起来就是内容。在 map_canvas 中，我想放置一张横跨整个屏幕的 Google 地图（例如高度 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>
I'm trying to copy the website http://touch.facebook.com, where they have a side menu that shows when a button on the top menu is clicked. Basically a three-panel layout of a side menu (A), a top menu (B), and the content (C) as shown below:
__________________
| |______B_____|
| A | |
| | C |
| | |
|___|____________|
In my HTML I call A side_menu, B top_menu, and C map_canvas. B and C combined is content. In the map_canvas I wanted to put a Google map that spans out the entire screen (like height 100% and width 100%). I want to stretch the map as much as possible so that this site will be viewed nicely on a computer or a mobile device.
Currently my CSS looks like this:
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%;
}
But the 'map_canvas' fails to appear at all. I know if I specifically enter a fixed height and width, then it will appear, but I want to stretch it out as far as the screen size. Is this possible?
Here is the 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>
I've also noticed that after the map gets loaded, it adds some style of its own:
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您需要在 CSS 中显式设置
#content的高度和宽度，因为map_canvasdiv 是该元素的子元素。看起来您需要使用绝对和相对宽度/高度的组合、使用边距偏移或基于 JS 的大小调整来确保地图调整到完整范围。但我首先要验证设置 #content 宽度和高度是否有效（应该）。
感谢将术语“mumbo jumbo”纳入 StackOverflow 问题中。 :-)
You need to explicitly set the height and width of
#contentin your CSS, since themap_canvasdiv is a child of that element. Looks like you'll need to use either a combination of absolute and relative width/height, use margin offsets, or JS-based resizing to ensure that the map adjust to the full extent.But I would start by verifying that setting the #content width and height works first (it should).
Kudos for incorporating the term "mumbo jumbo" into a StackOverflow question. :-)