Last active
December 15, 2018 19:11
-
-
Save eeejay/ecb44559e30b0beaf817322a1450543c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="viewport" content="width=device-width, user-scalable=no" /> | |
<style> | |
html { | |
height: 100%; | |
width: 100%; | |
} | |
body { | |
height: 2000px; | |
width: 100%; | |
margin: 0px; | |
padding: 0px; | |
} | |
div.bar { | |
width: 20px; | |
top: 0px; | |
box-sizing: border-box; | |
border: 3px solid purple; | |
} | |
.fixedpercent { | |
position: fixed; | |
height: 100%; | |
background-color: lightsteelblue; | |
} | |
.fixedvh { | |
position: fixed; | |
height: 100vh; | |
background-color: lightskyblue; | |
} | |
.abspercent { | |
position: absolute; | |
height: 100%; | |
background-color: darksalmon; | |
} | |
.absvh { | |
position:absolute; | |
height: 100vh; | |
background-color: coral; | |
} | |
.textfixed { | |
width: 600px; | |
height: 20px; | |
padding: 0px 20px; | |
transform: rotate(90deg); | |
transform-origin: left bottom 0; | |
} | |
.textabs { | |
width: 600px; | |
height: 20px; | |
padding: 0px 120px; | |
transform: rotate(90deg); | |
transform-origin: left bottom 0; | |
} | |
#console { | |
position: fixed; | |
top: 10px; | |
left: 10px; | |
} | |
#fixedbottom { | |
position: fixed; | |
bottom: 0; | |
left: 0; | |
width: 50%; | |
height: 25px; | |
background-color: green; | |
} | |
</style> | |
<script> | |
let count = 0; | |
function resized() { | |
document.getElementById("innerHight").textContent = window.innerHeight; | |
document.getElementById("clientHeight").textContent = document.documentElement.clientHeight; | |
document.getElementById("count").textContent = ++count; | |
} | |
var fullscreen = false; | |
addEventListener("load", function() { | |
document.documentElement.addEventListener("click", function() { | |
if (fullscreen) | |
document.webkitExitFullscreen(); | |
else | |
document.documentElement.webkitRequestFullscreen(); | |
fullscreen = !fullscreen; | |
}); | |
}); | |
</script> | |
</head> | |
<body onresize="resized()"> | |
<div style="right: 0px" class="bar fixedpercent"><div class="textfixed">percentage-based position:fixed</div></div> | |
<div style="right: 25px" class="bar fixedvh"><div class="textfixed">viewport-unit position:fixed</div></div> | |
<div style="right: 50px" class="bar abspercent"><div class="textabs">percentage-based position:absolute</div></div> | |
<div style="right: 75px" class="bar absvh"><div class="textabs">viewport-unit position:absolute</div></div> | |
<div id="console"> | |
<dl> | |
<td>window.innerHeight</td><dd id="innerHight"></dd> | |
<td>documentElement.clientHeight</td><dd id="clientHeight"></dd> | |
<td>Event count</td><dd id="count"></dd> | |
</dl> | |
</div> | |
<div id="fixedbottom"></div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment