JSFiddle - React, Tailwind, and code Playground

by minh vi

HTML

<script src="http://lab.gasteroprod.com/vub/viewport-units-buggyfill-0.5.0.js"></script>

<div class="container">
	<div class="element">I am at the <strong class="top">top</strong><strong class="bottom">bottom</strong> of the viewport!</div>
</div>

CSS

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

body {
	margin: 0;
	padding: 0;
}

.container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	border: 1px solid green;
}

.topleft {
	position: absolute;
	top: 0;
	left: 0;
	width: 50vw;
	height: 40vh;
	border: 1px solid red;
}

.bottomright {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 50vw;
	height: 40vh;
	border: 1px solid blue;
}

JavaScript

window.viewportUnitsBuggyfill.init({ force: true });