CSS計算寬度和高度值

Question

如何使用CSS計算屏幕高度並將返回值用於寬度計算？ 有可能嗎？

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

Answer 1

是的，在CSS中有一個叫做vh（視口高度）和vw（視口寬度）的東西。 視口就是屏幕。

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

Answer 2

在CSS上，這甚至是不可能的，在javascript上您不會有任何問題，我建議您使用其他width: 100vw值，例如width: 100vw窗口寬度的width: 100vw相對值， height:100vh窗口height:100vh相對值， max-width: & min-width:和max-height: & min-height: width:50%或height:50%您的元素會自動調整大小並有限制。 您還可以利用諸如::after和::before類的相對於父元素的元素，並獲取例如邊框三角形。

如果您想提供更多信息，我們可以為您的問題找到確切的代碼。

用javascript做的方法可以像這樣

  // 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>