css - 如何在我的网站上自动调整谷歌地图的大小？

Question

我想在网页上放置一个谷歌地图，并在div其后有几个文本框：

    <div id="map_area">
      <div id="map_canvas"></div>
    </div>
    <div id="date_range">
      <input type="text" id="start_datepicker" />
      <input type="text" id="end_datepicker" />
    </div>

我希望文本输入具有自动高度，并且 map_area/map_canvas 占据所有其余部分。height我需要在 map_canvas 上设置什么样式。到目前为止，只有 px 中的百分比或高度有效，但是发送 div 要么太大要么太小。

是否有设置可以让第二个 div 为自动高度并使地图的高度为总减秒 div？

Answer 1

您需要将 html 和 body 标签设置为 height:100%。

然后将 map_area 设置为 ay height:90% 并将 date_range 设置为 10%s。

然后将 map_canvas 设置为高度 100%。

这样，map_area 和 date_range 将占据 100% 的可用屏幕高度，而 map_canvas 将占据 map_area 的全部高度。

Answer 2

最后，我使用display: table了 body 和display: table-rowdiv 元素。虽然我想要放置的元素位于地图的动态图块后面，但它的效果非常好。

最后，我只是div按照谷歌建议的“自定义控件”制作了一个并将其放在地图上。更容易，看起来不错。