javascript - CSS max() 函数替代

Question

我想将 HTML 元素的 min-height 设置为两个值中的最大值，但不幸的是 css 不支持 max()。
这是我的 CSS 代码:

#content{ min-height:calc( 100% - 100px); }

另一个值是常数(400px)。我想我必须使用 JS，但我不知道该怎么做。
这是我的 JS 代码:

function layout(){
    var y = document.getElementById("content");
    y.style.minHeight = Math.max(parseInt(y.style.minHeight), 400).toString + "px";
}
window.onload = layout;
window.onresize = layout;

alert(parseInt(y.style.minHeight)) 给我 naN。

我做错了什么？

问候

Answer 1

我无法确定获取min-height 样式的计算结果的直接方法。

但是下面的函数将它赋给了元素的height，从中我们可以得到它作为元素的新的offsetHeight。

然后该函数恢复元素的原始高度:

function layout() {
  var y = document.getElementById('content'),
      h = y.offsetHeight;

  y.style.height = getComputedStyle(y).getPropertyValue('min-height');
  y.style.minHeight = Math.max(y.offsetHeight, 400) + 'px';
  y.style.height = h + 'px';
} //layout

Working Fiddle