CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
CodeTrooper
CodeTrooper

Reputation: 1888

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.

Upvotes: 3

Views: 6526

Answers (3)

Robbie
Robbie

Reputation: 23

min-height:100vh; min-width:100vw;

This also solves the problem for viewports that are taller than they are wide.

Upvotes: 0

Manwal
Manwal

Reputation: 23836

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

Upvotes: 6

DRD
DRD

Reputation: 5813

You can do so by setting position to absolute or fixed, depending on what you are trying to accomplish. Here's the updated fiddle: http://jsfiddle.net/BHe3k/4/.

Upvotes: 0

Related Questions