Viewport

by Madalena Galbiati

HTML

<div class="first">
</div>
<div class="second">
</div>

CSS

body, html {margin:0; padding:0;}
.first {
	background:url('http://www.sopapeldeparede.com.br/wp-content/uploads/2011/03/windows-7-future-is-yours-wallpaper.jpg');
	background-size:cover;
	width:100%;
	height:100%;}
.second{width:100%; background:blue;}

JavaScript

function width(){
  return(window.innerWidth)?
  window.innerWidth:
  document.documentElement.clientWidth||document.body.clientWidth||0;
}
function height(){
  return(window.innerHeight)?
  window.innerHeight:
  document.documentElement.clientHeight||document.body.clientHeight||0;
}
$(document).ready(function(){
	$('.first, .second').css('height',height());
});
$(window).resize(function() {
	$('.first, .second').css('height',height());
});