user2224350 user2224350 - 1 year ago 61
CSS Question

CSS max() function alternative

I would like to set the

of a HTML element to the maximum of two values, but unfortunately css doesn't support

Here's my css code:

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

The other value is constant number (
). 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"); = Math.max(parseInt(, 400).toString + "px";
window.onload = layout;
window.onresize = layout;

gives me

What am I doing wrong?


Answer Source

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; = getComputedStyle(y).getPropertyValue('min-height'); = Math.max(y.offsetHeight, 400) + 'px'; = h + 'px';
} //layout

Working Fiddle