Javascript 如何创建一个宽度和高度均为100%的谷歌图表？

如何创建一个宽度和高度均为100%的谷歌图表

例如，我尝试过使用明显的

宽度：100%

，但这不起作用

来自谷歌的文档：

设置图表高度和宽度是一个非常常见的选项。你可以 在两个位置指定图表大小：在容器的HTML中 元素，或在图表选项中。如果在中指定大小 在这两个位置，图表通常会按照指定的大小 在HTML中。如果未在HTML或中指定图表大小 作为一个选项，图表可能无法正确呈现

解决方案是使用HTML指定宽度，而不是使用Javascript。因此：

var options = {
  'legend':'left',
  'title':'My Big Pie Chart',
  'is3D':true,
  'width':100%,
  'height':500
}

这是行不通的

现在还有一个棘手的问题。如果在CSS中省略高度，它也不会起作用。图表将以最小高度显示，这不是您想要的高度。但是，如果添加高度：100%；这不会有任何区别。图表仍将显示其最小高度。为什么？在HTML4中，body元素与整个浏览器窗口一样大。因此，将图元高度设置为100%将使该图元适合整个窗口的大小。但在HTML5中，默认情况下，body元素只与其内容一样大。因此，在HTML5中将一个元素的高度设置为100%，您只是说您希望该元素的高度与自然高度一样

懒惰的解决方案是删除文档开头的DOCTYPE和xlmns属性，这样页面就可以使用HTML4，但是其他任何HTML5功能都不起作用。因此，您可以使用CSS将html/body标记的高度设置为100%，使其填充整个浏览器窗口，如下所示：

html, body {
      width: 100%;
      height: 100%;
    }

---

您的HTML标记看起来像什么？您将

width:100%

设置为什么？这是一个更好的答案