gpt4 book ai didi

使用 Google Maps API 进行 CSS 定位

转载 作者:太空宇宙 更新时间:2023-11-04 16:06:10 26 4
gpt4 key购买 nike

我正在尝试复制网站 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 中,我想放置一个横跨整个屏幕的 Google map (例如高度 100% 和宽度 100%)。我想尽可能地拉伸(stretch) map ,以便在计算机或移动设备上可以很好地查看此站点。

目前我的 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”根本没有出现。我知道如果我专门输入一个固定的高度和宽度,那么它就会出现,但我想将它拉伸(stretch)到屏幕尺寸。这可能吗?

这是 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>

我还注意到 map 加载后,它添加了一些自己的样式:

<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 中显式设置 #content 的高度和宽度,因为 map_canvas div 是该元素的子元素。看起来您需要使用绝对和相对宽度/高度的组合、使用边距偏移或基于 JS 的调整大小以确保 map 调整到完整范围。

但我首先要验证设置#content 宽度和高度是否有效(应该)。

将术语“mumbo jumbo”纳入 StackOverflow 问题的荣誉。 :-)

关于使用 Google Maps API 进行 CSS 定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9089851/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com