css - firefox css max-width 和 max-height 内 max-height div

Question

我有一个具有 max-height 的 div 和其中的图像，应该使用 max-width:100% 和 max-height:100%。在 Chromium 中，这是可行的，但 Firefox 仅使用最大宽度并忽略最大高度。

div#overlaycontent{
  position:relative;
  overflow:hidden;
  height:100%;
  overflow-y:auto; 
}

div#pic{
  overflow:hidden;
  position:relative;
  box-sizing:border-box;
  float:right;
  width: -moz-calc(100% - 250px);
  width: -webkit-calc(100% - 250px);
  width: -o-calc(100% - 250px);
  width: calc(100% - 250px); 
  max-height:90%;
}

img#zoompic{
  max-width:100%;
  max-height:100%;
  display:block;
}

如何才能让 Firefox 两者同时使用？最大宽度和最大高度？

Answer 1

mozilla developer network用百分比描述 max-height 如下:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as none.

此描述还与高度和百分比值一起使用。因此，如果您想使用 max-height 属性，则必须将图像或父容器设置为特定的像素大小。也许如果你创建一个 JSFiddle针对您的问题，我们可以向您展示没有 max-height 的其他解决方案。

---

编辑//现在有了给定的 JSFiddle，这是一个工作示例 http://jsfiddle.net/wd9rP/