不幸的是,100vh
并不总是与 100%
浏览器高度相同,如下例所示。
html,
body {
height: 100%;
}
body {
overflow: scroll;
}
.vh {
background-color: blue;
float: left;
height: 50vh;
width: 100px;
}
.pc {
background-color: green;
float: left;
height: 50%;
width: 100px;
}
<div class="vh"></div>
<div class="pc"></div>
这个问题在 iPhone 6+ 上更为明显,上部位置栏和下部导航栏如何在滚动时扩展和收缩,但不包括在 100vh
的计算中。
100%
高度的实际值可以在JS中使用window.innerHeight
获取。
有没有方便的方法在JS中计算当前100vh
到像素的转换?
我试图避免需要生成具有内联样式的虚拟元素来计算 100vh
。
为了这个问题的目的,假设一个敌对的环境,其中 max-width
或 max-height
可能会产生不正确的值,并且没有现有元素100vh
页面上的任意位置。基本上,假设任何可能出错的地方都有,但保证是干净的 native 浏览器功能除外。
到目前为止我想到的最好的是:
function vh() {
var div,
h;
div = document.createElement('div');
div.style.height = '100vh';
div.style.maxHeight = 'none';
div.style.boxSizing = 'content-box';
document.body.appendChild(div);
h = div.clientHeight;
document.body.removeChild(div);
return h;
}
但是对于 100vh
的当前值的计算似乎过于冗长,我不确定它是否还有其他问题。
最佳答案
怎么样:
function viewportToPixels(value) {
var parts = value.match(/([0-9\.]+)(vh|vw)/)
var q = Number(parts[1])
var side = window[['innerHeight', 'innerWidth'][['vh', 'vw'].indexOf(parts[2])]]
return side * (q/100)
}
用法:
viewportToPixels('100vh') // window.innerHeight
viewportToPixels('50vw') // window.innerWidth / 2
关于javascript - 在 JS 中将 vh 单位转换为 px,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34166341/