html - 如何在着陆页上创建全屏 div

Question

我正在创建一个网站，但是我希望该网站有一个全屏 div(像这样:http://peet.io)但是我不知道我的代码有什么问题，我已经尝试谷歌搜索了几次，但仍然没有帮助。

这是我的代码: http://jsfiddle.net/6p3dk2yo/

.introduction {
    height: 100%;
    width: 100%;
    background: url('../images/header.jpg') no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: absolute;
}

那是我的介绍 css 代码。然而，它只显示我的 test div 而不是我最需要的 introduction div，它没有显示，'test' div 正在隐藏它。

如果有人知道我该如何解决这个问题，请说:)

Answer 1

那是因为设置height: 100%简单的意思是“拉伸(stretch)到元素内容的高度”。因为它是空的 <div>元素，100% 的高度简单地计算为 0px。

不过你可以做的是使用 vw或 vh必须相对于视口(viewport)大小计算的尺寸单位(参见 browser compatibility and support):

.introduction {
    height:100vh;
    width: 100%;
    background: url('../images/header.jpg') no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
}

http://jsfiddle.net/teddyrised/6p3dk2yo/3/

更好的是，您还可以使用 max-height或 min-height通过 @media 控制元素在较小的移动视口(viewport)中应该有多大条件语句。