<!DOCTYPE>
<html>
<style>
 #element-container-vh {
   background:green;
 }
</style>
<div id="element-container-vh">TEST PASSED</div>
<script>
function applyStyle() {
    var viewportHeight = window.innerHeight;
    var elementStyle = document.getElementById("element-container-vh").style;
    elementStyle.height = Math.floor(30 * viewportHeight / 100) + "px";
    elementStyle.width = Math.floor(30 * viewportHeight / 100) + "px";
    elementStyle.fontSize = Math.floor(3 * viewportHeight / 100) + "px";
    elementStyle.lineHeight = Math.floor(4 * viewportHeight / 100) + "px";
    elementStyle.textIndent = Math.floor(2 * viewportHeight / 100) + "px";
    elementStyle.marginLeft = Math.floor(2 * viewportHeight / 100) + "px";
    elementStyle.marginRight = Math.floor(2 * viewportHeight / 100) + "px";
    elementStyle.marginTop = Math.floor(2 * viewportHeight / 100) + "px";
    elementStyle.marginBottom = Math.floor(2 * viewportHeight / 100) + "px";
    elementStyle.borderTopLeftRadius = Math.floor(1 * viewportHeight / 100) + "px";
    elementStyle.borderTopRightRadius = Math.floor(1 * viewportHeight / 100) + "px";
    elementStyle.borderBottomLeftRadius = Math.floor(1 * viewportHeight / 100) + "px";
    elementStyle.borderBottomRightRadius = Math.floor(1 * viewportHeight / 100) + "px";
    elementStyle.paddingLeft = Math.floor(2 * viewportHeight / 100) + "px";
    elementStyle.paddingRight = Math.floor(2 * viewportHeight / 100) + "px";
    elementStyle.paddingTop = Math.floor(2 * viewportHeight / 100) + "px";
    elementStyle.paddingBottom = Math.floor(2 * viewportHeight / 100) + "px";
    elementStyle.minHeight = Math.floor(10 * viewportHeight / 100) + "px";
    elementStyle.minWidth = Math.floor(10 * viewportHeight / 100) + "px";
    elementStyle.maxHeight = Math.floor(60 * viewportHeight / 100) + "px";
    elementStyle.maxWidth = Math.floor(60 * viewportHeight / 100) + "px";
}
applyStyle();
</script>
</html>