以下是一个示例,可让您大致了解我要实现的目标:启动框架
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(www.desktopwallpaperhd/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(www.desktopwallpaperhd/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覆盖视口的整个可见部分
发布评论