Make div cover the entire visible part of the viewport

Here's an example to give you an idea of what I want to achieve: Startup Framework

I want to make a div cover the entire current visible part of the viewport like the div with the video on it on the link shows.

I'm trying to accomplish something similar but currently I just can't really pull it off. This is what I have so far: Fiddle

Where I use 100% height for the first div.

body{height: 100%; width: 100%;}
.special-jumbotron{height: 100%; width: 100%; background: url(http://www.desktopwallpaperhd.net/wallpapers/17/7/cool-background-wallpaper-keyboard-abstract-other-177639.jpg) center center fixed; background-size: cover; color: #ddd; text-shadow: 3px 4px #333;}

I'm brainstorming how to achieve this effect, but nothing has worked so far and I'm out of ideas. Any help would be much appreciated.

Try to use height:100vh, Its new CSS units relative to viewport height (vh) and viewport width (vw). Supported by modern browsers and IE >= 9.

Complete css:

.special-jumbotron {
height:100vh;
min-height:100%;
max-height:100%;
background:url(http://www.desktopwallpaperhd.net/wallpapers/17/7/cool-background-wallpaper-keyboard-abstract-other-177639.jpg) center center fixed;
background-size:cover;
color:#ddd;
text-shadow:3px 4px #333;
}

Demo

This can also achive using jQuery:

$(function(){
    $('.special-jumbotron').css({'height':(($(window).height()))+'px'});//on load
    $(window).resize(function(){ // On resize
        $('.special-jumbotron').css({'height':(($(window).height()))+'px'});
    });
});

Jquery Demo