使div覆盖视口的整个可见部分 [英] 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

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

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

我在第一格中使用 100％高度。

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.

推荐答案

尝试使用 height：100vh ，相对于视口高度（vh）和视口宽度（vw）的新CSS单位。由现代浏览器和IE> = 9支持。

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.

完整的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;
}

演示

是否要测试其响应性。全屏检查。 全屏演示

If you want to test its responsive or not. check in full screen. Full screen Demo

这也可以使用jQuery实现：

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演示

这篇关于使div覆盖视口的整个可见部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！