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 占据所有其余部分。我需要在 map_canvas 上设置什么 height 样式。到目前为止，只有 px 中的百分比或高度有效，但发送的 div 要么太大要么太小。

是否有一个设置可以让第二个 div 为自动高度并使 map 的高度为 total-minus-second-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 的整个高度。