javascript - 制作视口(viewport)的标题和div高度

Question

在完成某事时遇到了一些困难。我想要一个带有标题和导航的页面，然后我希望页面的其余部分是一张填充视口(viewport)的图像。

目前我有这样的东西

<header id="header" class="header-default">
   ...nav items
</header>

<div id="contents"></div>

然后在我的 CSS 中做

#header.header-default{
    height: 100px;
    padding-top:10px;
    padding-bottom:10px;
}

#contents{
    background: url('images/home.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

然后最后我有一些 javascript 来设置内容的高度。

jQuery(function() {
    setHeight();

    jQuery(window).resize(function() {
        setHeight();
    });
});

function setHeight() {
    windowHeight = jQuery(window).innerHeight()-120;
    jQuery('.home #contents').css('min-height', windowHeight);
};

现在它可以工作了，它适合视口(viewport)，因为它应该这样做。然而，图像是一个人，它切断了他们额头的顶部。有什么办法可以让图像完美显示？如果由于比率(我认为正在发生)而不能选择视口(viewport)大小，那么我不介意正常显示它。

谢谢

Answer 1

background-size: cover 和 background-attachment: fixed 的组合是问题的原因。除了 background-attachment: fixed 会导致动画性能下降，因为背景一直在重新绘制。要获得所需的结果，请使用带有 position: fixed 的::before 伪元素 - fiddle .

顺便说一句 - 通过这种方式，您还可以删除高度更改脚本，因为背景始终是 100% 可用高度；

body::before {
    display: block;
    position: fixed;
    top: 120px; /** so it will be under the header **/
    right: 0;
    bottom: 0;
    left: 0;
    background: url('http://blog.homerealestate.com/wp-content/uploads/2010/04/Person.Ashley.jpg') no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    content:'';
}

#contents {
    position: relative;
    z-index: 10; /** above the background **/
}