2

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 ?

haheute
  • 2,129
  • 3
  • 32
  • 49
  • here is the fiddle: http://jsfiddle.net/qx75g/ – haheute Feb 03 '14 at 21:38
  • Ahhh.... now I see. ```max-height``` is not enough for firefox. Set ```height``` and it works as expected. Thats because only ```height``` of inner calculates a real height for the ```max-height``` of the image. http://jsfiddle.net/wd9rP/ – Eich Feb 03 '14 at 21:57
  • The problem is, below the orange div, I have comments. So if the image is small or the browser window is narrow (responsive css), there is empty space between picture and comments. That's why I wanted to use max-height.. :( – haheute Feb 03 '14 at 22:03
  • http://stackoverflow.com/questions/1622027/percentage-height-html-5-css . To use the ```max-height``` attribute you'll have to set the height of a parent container. Otherwise the browser don't know how to calculate the height (height of what?). – Eich Feb 03 '14 at 23:04
  • Like in the fiddle, I have these heights: body(100%)->(div(100%)->div(max.50%)->div(max.100%).. which works in chromium (!), but not in firefox. it seems, firefox doesn't like the two max-heights. probably it does not accept "percent of percent" – haheute Feb 04 '14 at 07:38

1 Answers1

5

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/

Eich
  • 3,728
  • 1
  • 21
  • 34