large-small-dynamic-viewport-units-polyfill
Version:
Polyfill for svh, dvh and lvh CSS viewport units
167 lines (124 loc) • 4.33 kB
HTML
<html>
<head>
<script src="./src/index.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jgthms/minireset.css@master/minireset.min.css">
<style>
html, body {
height: 2000px;
}
.box {
background-color: lightgray;
position: fixed;
top: 10px;
left: 10px;
}
.wrapper {
display: flex;
}
.absolute {
position: absolute;
height: 100%;
width: 40px;
background-color: orange;
right: 0;
top: 0;
bottom: 0;
}
.fixed {
position: fixed;
height: 100%;
width: 80px;
background-color: pink;
right: 0;
top: 0;
bottom: 0;
}
.svh {
width: 40px;
height: 100vh;
height: calc(var(--1svh, 1vh) * 100);
height: 100svh;
background-color: red;
}
.cvh {
width: 40px;
height: 100vh;
height: calc(var(--1cvh, 1vh) * 100);
height: 100cvh;
background-color: blue;
}
.dvh {
width: 40px;
height: 100vh;
height: calc(var(--1dvh, 1vh) * 100);
height: 100dvh;
background-color: green;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', function () {
var calculate = function() {
var innerheight = window.innerHeight;
var clientheight = document.documentElement.clientHeight;
document.getElementById('innerheight').innerText = innerheight;
document.getElementById('clientheight').innerText = clientheight;
var element = document.createElement("div");
element.style.width = '1px';
element.style.height = '100vh';
element.style.visibility = 'hidden';
var body = document.querySelector("body");
body.appendChild(element);
vhheight = element.clientHeight;
document.getElementById('hundredvh').innerText = vhheight;
element.remove();
var absolute = document.createElement("div");
absolute.style.width = '1px';
absolute.style.height = '100%';
absolute.style.position = 'absolute'
absolute.style.left = '0';
absolute.style.top = '0';
absolute.style.bottom = '0';
absolute.style.visibility = 'hidden';
body.appendChild(absolute);
var absoluteHeight = absolute.clientHeight;
document.getElementById('absoluteheight').innerText = absoluteHeight;
absolute.remove();
var fixed = document.createElement("div");
fixed.style.width = '1px';
fixed.style.height = '100%';
fixed.style.position = 'fixed'
fixed.style.left = '0';
fixed.style.top = '0';
fixed.style.bottom = '0';
fixed.style.visibility = 'hidden';
body.appendChild(fixed);
var fixedHeight = fixed.clientHeight;
document.getElementById('fixedheight').innerText = fixedHeight;
fixed.remove();
}
calculate();
setInterval(function () {
calculate();
}, 1000)
})
</script>
</head>
<body>
<div class="box">
<div>window.innerHeight: <span id="innerheight"></span></div>
<div>document.documentElement.clientHeight: <span id="clientheight"></span></div>
<div>100vh: <span id="hundredvh"></span></div>
<div>absolute: <span id="absoluteheight"></span></div>
<div>fixed: <span id="fixedheight"></span></div>
</div>
<div class="wrapper">
<div class="svh"></div>
<div class="cvh"></div>
<div class="dvh"></div>
</div>
<div class="fixed"></div>
<div class="absolute"></div>
</body>
</html>