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。

然后该函数恢复元素的原始height：

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

CSS max（）函数替代

1 个答案: