css - firefox css max-width 和 max-height 里面的 max-height div

Question

我有一个最大高度的 div 和里面的一个图像，它应该使用最大宽度:100% 和最大高度: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.

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

---

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