css - 流宽谷歌地图-6ren

css - 流宽谷歌地图

转载作者：技术小花猫更新时间：2023-10-29 11:08:15

我有一个 2 列的网站布局，左边的固定宽度列和右边的流动宽度 Google map 填充了左边列未占用的其余宽度。

问题: 但是我似乎无法获取 Google map <div id="map_canvas">流动并占据其余的宽度。我设置错了吗？谢谢!

HTML

<div id="main_container">
    <div id="sidebar"></div>
    <div id="map_container">
            <div id="map_canvas"></div>
    </div>
</div>

CSS

#main_container {
    width: 100%;
    height: 500px;
    float: left;
    clear: both;
    position: relative;
    z-index: 1;
}

#map_container {
    height: 100%;
    float: left;
    position: relative;
}

#sidebar {
    width: 270px;
    float: left;
}

#map_canvas {
    height: 100%;
    min-width: 100px;
    float: left;
    display: block;
    position: absolute;
    z-order: 1000;
}

最佳答案

如果您尝试使用 style="width:100%;height:100%"在您的 map div 上，正如您通过提供 100% 高度所做的那样，您会得到一个高度为零的 map div。那是因为 div 试图成为 <body> 大小的百分比，但默认情况下具有不确定的高度。

有多种方法可以确定屏幕的高度并使用该像素数作为 map div 的高度，但一个简单的替代方法是更改 <body>这样它的高度就是页面的 100%。我们可以通过应用 style="height:100%" 来做到这一点<body>和 <html>. (我们必须对两者都这样做，否则 <body> 会尝试成为文档高度的 100%，而默认高度是不确定的高度。)

重新调整您的 css 值应该可以解决您的问题。

关于css - 流宽谷歌地图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8768580/