Question

我有一个网站的2列布局，左侧固定宽度列和右侧流体宽度Google地图填充左侧列未采用的其余宽度。

问题：但是我似乎无法让Google地图<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;
}

Answer 1

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

有多种方法可以确定屏幕的高度，并使用该像素数作为地图div的高度，但一个简单的替代方法是更改<body>，使其高度为页面的100％。我们可以将style="height:100%"同时应用于<body>和<html>.（我们必须对两者执行此操作，否则<body>会尝试为高度的100％该文档的默认值是不确定的高度。）

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

流畅的Google地图

1 个答案: