css - 根据内容调整 InfoWidow 高度，从而删除滚动条

Question

我正在寻找一种调整信息窗口高度的方法，以便我的所有数据都出现在信息窗口中。

从屏幕截图中可以看出。不同信息窗口中的数据基本上是一个具有 2 列和可变行数的表格。

从截图来看—— “Baba Haridas Nagar”信息窗口非常完美。 但是，如果行大小增加，则会弹出一个隐藏第二列的滚动条。 我希望在没有滚动条的情况下显示所有行(适当增加信息窗口的高度表明它消失了:P)

在内容本身中设置 div 最大高度有效，但只能达到特定值。

Answer 1

出于多种原因，我不会尝试设置特定高度。解决此问题的一个快速简便的方法是向您的信息窗口添加一个容器(比如一个 DIV)，为您的容器提供 10 或 20 像素的右边距或填充，然后将您的内容添加到容器中。这样，您可以确保滚动条不会覆盖您的内容。

var contentString = '<div id="content" style="margin-right:20px;">'+
'Your content here'+
'</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

检查这个 fiddle :http://jsfiddle.net/upsidown/VFyYb/

编辑:

根据 Google 文档:如果您希望明确调整内容的大小，您可以将其放在 DIV 元素中并使用 CSS 设置 DIV 的样式。您也可以使用 CSS 启用滚动。请注意，如果您不启用滚动并且内容超出信息窗口中的可用空间，则内容可能会溢出信息窗口。 https://developers.google.com/maps/documentation/javascript/infowindows