javascript - CSS max-height 不起作用，但同一 div 的高度起作用

Question

在我的外部 css 文件中，

#slider {
    width:1200px;
    height:800px;
    margin:0 auto;
}

有效，但是

#slider {
    max-width:1200px;
    max-height:800px;
    margin:0 auto;
}

没有。
它给出 0 高度。
我使用的是最新的 chrome 浏览器。 我做错了什么？
-webkit-calc(100% - 100px) 或 calc(100% - 100px) 也不起作用。 我猜 css2/css3 属性都不起作用。
我使用的这个 html 文件是包含许多 css 和 javascript 的复杂 html 的一部分。 css2 是否被阻止或其他文件中的某些内容？

更新: 指定 min-height 有效，并将 div 的高度设置为其值。

Answer 1

除了 max-height 之外，您还需要应用 height: 100%;，这将使 height 为其父级的 100%直到它自己的最大高度。此外，它只能占用其父级的空间。因此，如果它是 body 标记的第一个子级，您将执行以下操作:

JS Fiddle (以较小的宽度/高度为例)

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

#slider {
  height: 100%;
  max-width: 1200px;
  max-height: 800px;
  margin: 0 auto;
}

要使用calc()，其工作方式相同。它与其 parent 的高度/宽度有关。所以你可以这样做:

JS Fiddle

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

#slider {
  max-width: 500px;
  max-height: 500px;
  margin: 0 auto;
  height: calc(100% - 100px);
  width: calc(100% - 100px);
}