user2224350 user2224350 - 6 months ago 9
CSS Question

CSS max() function alternative

I would like to set the

min-height
of a HTML element to the maximum of two values, but unfortunately css doesn't support
max()
.

Here's my css code:

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


The other value is constant number (
400px
). I think I have to use JS, but I cant figure out how to do that.

Here is my JS code:

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))
gives me
naN
.

What am I doing wrong?

Regards

Answer

I can't determine a direct way to get the calculated result of the min-height style.

But the following function assigns it to the height of the element, from which we can get it as the element's new offsetHeight.

The function then restores the original height of the element:

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