firefox的CSS最大宽度和最大高度内的最大高度分区 [英] firefox css max-width and max-height inside max-height div

问题描述

我有一个最大高度的div和里面的图像，应使用最大宽度：100％和最大高度：100％。在铬，这个工程，但Firefox只使用最大宽度，忽略最大高度。

  div＃overlaycontent {
 position：relative; 
 overflow：hidden; 
身高：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）; 
最高身高：90％; 
} 
 
 img＃zoompic {
 max-width：100％; 
最大高度：100％; 
 display：block; 
} 
  

如何才能实现firefox将同时使用？最大宽度和最大高度？

解决方案

mozilla developer network 描述了 max-height 其中百分比如下：

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

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

---

编辑//
现在使用给定的JSFiddle，例如 http://jsfiddle.net/wd9rP/

I have a div with max-height and an image inside it, that should use max-width:100% and max-height:100%. In chromium, this works, but firefox uses only max-width and ignores max-heigth.

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;
}

How can I achieve that firefox will use both? max-width and max-height ?

解决方案

The mozilla developer network describes max-height with percentage as follows:

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.

This description is also used with height and percentage values. So if you want to use the max-height property you'll have to set the image or the parent container to a specific pixel size. Maybe if you create a JSFiddle with your problem we can show you other solutions without max-height.

---

EDIT// Now with the given JSFiddle, this is a working example http://jsfiddle.net/wd9rP/

这篇关于firefox的CSS最大宽度和最大高度内的最大高度分区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！