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

【问题标题】：Make div cover the entire visible part of the viewport使 div 覆盖视口的整个可见部分
【发布时间】：2017-10-20 23:11:03
【问题描述】：

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

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

我正在尝试完成类似的事情，但目前我无法真正完成它。这是我目前所拥有的：Fiddle

我在第一个 div 中使用 100% 高度。

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

我正在集思广益如何实现这种效果，但到目前为止没有任何效果，而且我没有想法。任何帮助将不胜感激。

【问题讨论】：

选择的解决方案没问题，尽管旧版浏览器不支持视口单元，但可以使用 shim 实现：html5polyfill.com。实现所需效果的更有效方法是在body 和html 上设置100% 的height：jsfiddle.net/BHe3k/6。干杯。

标签： html css twitter-bootstrap-3

【解决方案1】：

尝试使用height:100vh，它的新 CSS 单位相对于视口高度 (vh) 和视口宽度 (vw)。受现代浏览器和 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;
}

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

【讨论】：

这解决了部分问题。但是它超出了视口大小，我需要它像我提供的链接一样响应。不比当前可见视口高度和宽度少一个像素。我能做到吗？
只是觉得它有效。还有一个问题。如果我在那里有一个引导程序的导航栏，度量值是否仍应为 100vw？
@hsoto jqeury 是完美的解决方案。并且您的示例链接也使用 jquery 来设置高度。因为使用 css 你不能控制窗口的大小。如果你有Navbar，那么你可以给你的div高度，比如windowheight-navheight
使用可能还想使用这个插件github.com/rodneyrehm/viewport-units-buggyfill（不是我的），因为 iOS 7 在使用 vh/vw 时有点问题

【解决方案2】：

您可以通过将position 设置为absolute 或fixed 来实现，具体取决于您要完成的任务。这是更新后的小提琴：http://jsfiddle.net/BHe3k/4/。

【讨论】：

这不是要走的路。我无法想象在移动方法布局中使用绝对位置。
您在哪里发布了有关移动布局的要求？

【解决方案3】：

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

这也解决了视口高度大于宽度的问题。

【讨论】：