Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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
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>
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.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.