如何使用最小/最大高度和高度將自適應CSS高度應用於元素？

Question

我正在嘗試將Dygraph擴展到其父容器的最大可用尺寸。

從技術上講，該圖是可調整大小的，可以使用重新渲染方法，也可以通過指定一個絕對容器（如本示例中所示）。

問題是，該插件需要硬編碼的值，否則它將計算任意值-請參閱此鏈接以獲取解釋，其中說：

  // 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

在您提供的“ 調整瀏覽器大小”示例中 ，該元素正按需要縮放到父容器。 然后，您可以將大小調整規則應用於容器（ #div_g ），而不是圖形本身。

在該示例中，添加此項將使圖形隨瀏覽器高度縮放，直到高度為300px：

#div_g {
    max-height: 300px;
}

所有圖形生成的元素都是使用JavaScript計算的。 這就是CSS對它們不起作用的原因。 因此，設置容器的樣式，然后讓圖形本身調整其大小以填充該容器。

您應該能夠使用position: relative; 如果您希望圖形與其他元素一起定位，則可以使用絕對值而不是絕對值。

---

“是否有使用min / max-height / height（或其他）強制瀏覽器擴展到最大高度的CSS方法？想不出其他任何辦法。”

傳統上，html文檔的高度與其所包含的高度相同，就像其他任何塊元素一樣。 您可以使用以下方法拉伸它以適合瀏覽器高度：

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