Firefox 返回像素值，Chrome 返回百分比值（CSS 最大高度）答案

【问题标题】：Firefox returns pixel value, Chrome returns percent value (CSS max-height)Firefox 返回像素值，Chrome 返回百分比值（CSS 最大高度）
【发布时间】：2014-12-10 01:46:35
【问题描述】：

我正在尝试（通过 jQuery）将通过 CSS 设置的 div 的最大高度作为百分比值（45%）。

在 Firefox 中 - 它返回一个像素值，但在 Chrome/Safari 中，该值以百分比 (45%) 的形式返回。我用来获取这些值的 jQuery 代码是：

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

我做错了吗？如何在 Chrome/Safari 中获取像素高度？甚至是 Firefox 中的百分比高度？

编辑：

原CSS：.content-section {width: 880px;边距：0 自动；最大高度：45%}

在 chrome 中计算的 CSS：

Firebug 中计算的 CSS：

【问题讨论】：

给出你用来设置值的 CSS - 我的意思是进入检查器（firebug 和 devtools）并给我们每个的“计算值”以及原始 CSS 源跨度>
您是否在 CSS 中设置了高度？如果没有，浏览器会为您设置一个。
max-height 和百分比？您如何首先将这两者结合起来？ max-height 不应该是可变大小的限制吗？
@Sharky 您可以将最大高度设置为像素或百分比值（以及其他值）
@Deryck 我知道你可以做到，但是，实际上为什么？

标签： jquery html css google-chrome firefox

【解决方案1】：

嗯，这很奇怪。一种解决方法是使用百分比来计算实际的最大高度。例如：

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

不确定您的代码到底是什么样子，因此这当然可能与编写的完全不一样。此外，您只需要为它所表现的时髦的浏览器执行此操作！

【讨论】：