Question

我正在尝试将Dygraph扩展到其父容器的最大可用尺寸。

从技术上讲，图表可以通过重新渲染方法或指定this示例中的绝对容器来调整大小。

问题是，插件需要硬编码值，否则会计算任意内容 - 请参阅this链接以获取解释，其中说明：

  // For historical reasons, the 'width' and 'height' options trump all CSS
  // rules _except_ for an explicit 'width' or 'height' on the div.
  // As an added convenience, if the div has zero height (like <div></div> does
  // without any styles), then we use a default height/width.

我一直在玩以下设置：

<div class="graph_wrap">
  <div class="graph_container">
     <!-- graph will be here -->
  </div>
</div>

我设法通过设置此CSS将图表 WIDTH 拉伸到100％：

html .ui-graph {
  width: 100%;
  min-width: 1px;
}

但是没有指定高度，插件会覆盖我的CSS并执行此操作：

html .ui-graph {
  width: 100%;
  min-width: 1px;
  /* height... */
  height: auto;
  max-height: 100%;
  min-height: 100%;
}

不起作用。只有当我添加height: 20em之类的内容时，该插件才会覆盖我的CSS集。

问题：
是否有任何CSS方式使用min/max-height/height（或其他）强制浏览器扩展到最大高度？想不出别的什么。确实

Answer 1

无法强制浏览器达到最大高度。你可以写像

这样的CSS

.max_width{
width: 100%;
}

这将使容器100％。

但高度将取决于内部元素的高度。

这可以使用javascript解决。

Answer 2

你可以采取多种方式：

看起来你正在做的方法是使用浏览器窗口拉伸图形。

height: 10vw; /* viewport width */

或

height: 10vh; /* viewport height*/

这些是不同的，所以实验你想要的。这肯定会调整它的大小。

Answer 3

在您提供的resize-to-browser example中，元素正在按照您的需要缩放到父容器。然后，您可以将大小调整规则应用于容器（#div_g），而不是图表本身。

在该示例中，添加此选项将使图形与浏览器高度成比例，直到它高达300px：

#div_g {
    max-height: 300px;
}

所有图形生成的元素都是用JavaScript计算的。这就是为什么CSS不能为他们工作的原因。因此设置容器的样式，让图表本身调整大小以填充容器。

如果您希望图表与其他元素一起定位，您应该可以使用position: relative;而不是绝对。

“是否有任何CSS方式使用min / max-height / height（或其他）强制浏览器扩展到最大高度？无法想到其他任何内容。”

传统上，html文档的高度与其包含的高度相同，就像任何其他块元素一样。您可以使用以下方法拉伸它以适合浏览器高度：

html, body {
    height: 100%;
    margin: 0;
}

如何使用min / max-height和height将响应式CSS高度应用于元素？

3 个答案: