CODEWITHSUNDEEP
htmlcss
KBE
KBE

Reputation: 379

CSS calc width and height values

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
}

Upvotes: 5

Views: 26592

Answers (2)

Johey
Johey

Reputation: 275

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);
}

Upvotes: 6

Hugo Stiven Laguna Rueda
Hugo Stiven Laguna Rueda

Reputation: 159

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>

Upvotes: 1

Related Questions