CSS calc width and height values

Question

How can I calc, using css, the screen height and use the returned value for the width calculation? is it possible at all?

myClass{    
    height: calc(50% - 33.5px);
    width: heightReturnedValue*1.3
}

Answer 1

Yes, in css there is a thing called vh (viewport height) and vw (viewport width). The viewport is the screen.

myClass {    
  height: calc(50% - 33.5px);
  width:  calc(100vh * 1.3);
}

Answer 2

on CSS, It is not even possible, on javascript you would not have any problem, I would recommend the use of other varial values ​​such as width: 100vw relative of width of the window, height:100vh relative of height of window, max-width: & min-width: and max-height: & min-height: with width:50% or height:50% your element is auto resize and have limits. You can also take advantage of elements such as the ::after and ::before that are relative to the father and get for example borders triangulars.

If you would put more information we could find the exact code for your problem.

method to do it with javascript can be like this

  // onresize event for responsive document.getElementsByTagName("BODY")[0].onresize=function(){ element = document.getElementById("you_element"); element.style.height = 'calc(50% - 33.5px)'; calculateHeight = parseInt(element.clientHeight) * 1.3 element.style.width = calculateHeight + 'px' document.getElementById("width").innerHTML = calculateHeight; document.getElementById("height").innerHTML = element.clientHeight; } // onload page for one set document.getElementsByTagName("BODY")[0].onload=function(){ element = document.getElementById("you_element"); element.style.height = 'calc(50% - 33.5px)'; calculateHeight = parseInt(element.clientHeight) * 1.3 element.style.width = calculateHeight + 'px' document.getElementById("width").innerHTML = calculateHeight; document.getElementById("height").innerHTML = element.clientHeight; } 

 .myclass{ background-color:#e1e1e1 } 

 <div style="width:400px; height: 500px;background-color:#f1f1f1"> <div id="you_element" class="myclass"> <p id="height"></p> <p id="width"></p> </div> </div>