can't apply style maxHeight in javascript (calc)

Question

I want to apply a maxHeight via js and using calc. The problem is it doesn't apply anything.

https://codepen.io/anon/pen/pqgQEe

var div = document.getElementById("toto2");
var offtop = div.offsetTop;
var offHei = div.offsetHeight;

console.log("calc('500px-"+(Math.abs(offtop-offHei))+"px');");


div.style.maxHeight="calc('500px-"+(Math.abs(offtop-offHei))+"px');"
console.log(div.style.maxHeight)

Why I am using calc, is because I will use 100% or 100vh in code, and I need it to work using calc

Answer 1

You need remove " ; and write proper format of calc with whitespace

 var div = document.getElementById("toto2"); var offtop = div.offsetTop; var offHei = div.offsetHeight; console.log("calc(500px - "+(Math.abs(offtop-offHei))+"px"); div.style.maxHeight="calc(500px - "+(Math.abs(offtop-offHei))+"px)" console.log(div.style.maxHeight) 

 #toto1{ height:500px; width:500px; background-color:red; overflow:auto; } #toto2{ top:300px; position:relative; height:500px; width:500px; background-color:blue; } 

 <div style="width:100%; height:100%;"> <div id="toto1"> <div id="toto2"></div> </div> </div> <!-- Copyright 2016 Google Inc. All Rights Reserved. Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at http://material.angularjs.org/HEAD/license. --> 

Answer 2

You need add white space and remove ''

Edit!

div.style.maxHeight="calc(500px - "+(Math.abs(offtop-offHei))+"px)"