Question

以下是一个示例，让您了解我想要实现的目标：Startup Framework

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

我正在努力完成类似的事情，但目前我无法真正实现这一目标。这是我到目前为止：Fiddle

我使用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＆gt; = 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;
}

Demo

如果您想测试其响应与否。全屏检查。 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

Answer 2

最小高度：100vh; 最小宽度：100vw;

这也解决了比它们更宽的视口的问题。

Answer 3

您可以将position设置为absolute或fixed，具体取决于您要完成的操作。这是更新的小提琴：http://jsfiddle.net/BHe3k/4/。

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

3 个答案: