[英]CSS calc width and height values
How can I calc, using css, the screen height and use the returned value for the width calculation? 如何使用CSS计算屏幕高度并将返回值用于宽度计算? is it possible at all?
有可能吗?
myClass{
height: calc(50% - 33.5px);
width: heightReturnedValue*1.3
}
Yes, in css there is a thing called vh (viewport height) and vw (viewport width). 是的,在CSS中有一个叫做vh(视口高度)和vw(视口宽度)的东西。 The viewport is the screen.
视口就是屏幕。
myClass {
height: calc(50% - 33.5px);
width: calc(100vh * 1.3);
}
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. 在CSS上,这甚至是不可能的,在javascript上您不会有任何问题,我建议您使用其他
width: 100vw
值,例如width: 100vw
窗口宽度的width: 100vw
相对值, height:100vh
窗口height:100vh
相对值, max-width: & min-width:
和max-height: & min-height:
width:50%
或height:50%
您的元素会自动调整大小并有限制。 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. 您还可以利用诸如
::after
和::before
类的相对于父元素的元素,并获取例如边框三角形。
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 用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.