Skip to content

Instantly share code, notes, and snippets.

@ezakto

ezakto/demo.html

Last active August 29, 2015 14:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ezakto/36691d17dd861f911e92 to your computer and use it in GitHub Desktop.
Save ezakto/36691d17dd861f911e92 to your computer and use it in GitHub Desktop.
Download ZIP
Full-height elements with css/js
Raw
demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" href="style.css">
<script>
(function(){
var s = document.createElement('style');
var f = function () { s.innerHTML = '.full-height{height:'+window.innerHeight+'px}'; };
f(); window.addEventListener('resize', f);
document.getElementsByTagName('head')[0].appendChild(s);
}());
</script>
</head>
<body>
<header class="full-height">
<h1>There.</h1>
</header>
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque eveniet incidunt, assumenda alias quod. Quia omnis, odit suscipit inventore ut, expedita modi culpa at excepturi dicta reprehenderit alias sit nisi!</p>
</div>
</body>
</html>
Raw
snippet.js
(function(){
var s = document.createElement('style');
var f = function () { s.innerHTML = '.full-height{height:'+window.innerHeight+'px}'; };
f(); window.addEventListener('resize', f);
document.getElementsByTagName('head')[0].appendChild(s);
}());
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment