最大高度 div 内的 firefox css 最大宽度和最大高度答案

【问题标题】：firefox css max-width and max-height inside max-height div最大高度 div 内的 firefox css 最大宽度和最大高度
【发布时间】：2014-02-27 13:08:19
【问题描述】：

我有一个带有最大高度的 div 和其中的一个图像，它应该使用最大宽度：100% 和最大高度：100%。在铬中，这是可行的，但 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 两者都使用？最大宽度和最大高度？

【问题讨论】：

这里是小提琴：jsfiddle.net/qx75g
啊……现在我明白了。 max-height 对于火狐来说是不够的。设置height 并按预期工作。那是因为只有内部的height 计算图像的max-height 的实际高度。 jsfiddle.net/wd9rP
问题是，在橙色 div 下方，我有 cmets。所以如果图片很小或者浏览器窗口很窄（响应式css），图片和cmets之间会有空白。这就是为什么我想使用 max-height .. :(
stackoverflow.com/questions/1622027/… 。要使用max-height 属性，您必须设置父容器的高度。否则浏览器不知道如何计算高度（什么的高度？）。
就像小提琴一样，我有这些高度：body(100%)->(div(100%)->div(max.50%)->div(max.100%)。 . 它适用于铬（！），但不适用于 firefox。看来，firefox 不喜欢这两个最大高度。可能它不接受“百分比”

标签： css firefox

【解决方案1】：

mozilla developer network 以如下百分比描述max-height：

百分比是根据生成框的包含块的高度计算的。如果包含块的高度没有明确指定（即它取决于内容高度），并且该元素不是绝对定位的，则百分比值被视为无。

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

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

【讨论】：

这也解决了我在 chrome 38 中的“问题”。所以谢谢 :)