Firefox returns pixel value, Chrome returns percent value (CSS max-height)

Question

I am trying (via jQuery) to get the max-height of a div set via CSS as a percentage value (45%).

In Firefox - it returns a pixel value, however, in Chrome/Safari, the value is returned as a percentage (45%). The jQuery code I am using to get these values is:

parseInt($('.content-section').css('max-height'))

Am I doing this the wrong way? How do I go about getting a pixel height in Chrome/Safari? Or even, a percentage height in Firefox?

EDIT:

The original CSS: .content-section {width: 880px; margin: 0 auto; max-height: 45%}

The computed CSS in chrome: Chrome Computed

The computed CSS in Firebug: Firebug Computed

give the CSS you used to set the value - and by that I mean go into the inspector (firebug and devtools) and give us the "computed value" for each along with the originating CSS source — Deryck
Have you set a height in your CSS? If not the browser will set one for you. — worldofjr
max-height and percentage? how can you combine these two in the first place? isn't max-height supposed to be the limit to a variable size? — Sharky
@Sharky you can set max-height to either pixel or percent value (along with others) — Deryck

rsahai91 rsahai91 · Accepted Answer · 2014-10-15T05:18:09

Hmm that's odd. One workaround is to use the percentage to calculate the actual max-height. For example:

var percentage = parseInt($('div.container').css('max-height')); //40?
var parentHeight = $('div.container').parent.height(); // i.e. 1000 (this is a px value)
var pixelHeight = parentHeight/percantage; // 400

Not sure exactly what you're code looks like so this of course may not work exactly as written. Also you would need to only do this for the browsers that it's acting funky for!

Firefox returns pixel value, Chrome returns percent value (CSS max-height)

1 Answers