Make div cover the entire visible part of the viewport

css, html, twitter-bootstrap-3

Solution

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

If you want to test its responsive or not. check in full screen. Full screen 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

Problem

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.

Original source