使div覆盖视口的整个可见部分

Question

这是一个示例,让您了解我想要实现的目标:Startup Framework

我想做一个div覆盖视口的整个当前可见部分,就像div上链接显示的视频一样.

我正在努力完成类似的事情,但目前我无法真正实现这一目标.这是我到目前为止:小提琴

我100%在第一个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;}

我正在集思广益,如何实现这种效果,但到目前为止还没有任何工作,我没有想法.任何帮助将非常感激.

Answer 1

尝试使用height:100vh,相对于视口高度(vh)和视口宽度(vw)的新CSS单位.由现代浏览器和IE> = 9支持.

完成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;
}

演示

如果你想测试它的响应与否.全屏检查.Full screen Demo

这也可以使用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