Question

我一直在寻找一个解决方案，让我的开场背景图像成为视口的100％，在使用Josh powel'的答案Page height to 100% of viewport?之后，它适用于Mac上的chrome，但不适用于任何其他浏览器（在Mac或Windows上）当我说'它适用于Mac上的chrome'时，它适用于大多数情况但是如果我将浏览器拉得太高，它就不适合覆盖我看到我的下一部分内容所以它就像它仅适用于高达x ...的高度。

这是我的代码：

<section class="intro">
<div class="intro-body">
</div>
</section>




.intro {
display: table;
width: 100%;
height: 100%;
padding: 350px 0 330px;
text-align: center;
color: #fff;
position: relative;
background: url(http://www.wallsave.com/wallpapers/1920x1200/plain-blue-gradient/2567400/plain-blue-gradient-pc-mac-hd-2567400.jpg) no-repeat center;
background-size:cover;
}




.intro-page {
padding: 150px 0 130px;
background: url(http://www.wallsave.com/wallpapers/1920x1200/plain-blue-gradient/2567400/plain-blue-gradient-pc-mac-hd-2567400.jpg) no-repeat center;
background-size: cover;
}

function windowH() {
var wH = $(window).height();

$('.intro, .intro-page').css({height: wH});
}

在此处http://jsfiddle.net/9h98f/1/

如果有人能放弃任何光明，那就太好了。

Answer 1

为了使元素的页面高度为100％，您还必须具有：

html,body { height: 100%; min-height: 100%; }

使用CSS比使用JS更好，更可靠。

或者，您可以将背景图像放在正文上（使用background-size: cover）。

使背景图像成为视口的100％

1 个答案: