使用CSS扩展图像以获得100％的浏览器高度

Question

我想扩展浏览器的 100％的英雄形象 HEIGHT 。

这就是我所拥有的：

.home-splash {
    position: relative;
    display: table;
    width: 100%;
    height: 100%;
    background: url("http://www.matthewkosloski.me/hero-3a.jpg") center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

使用此代码，英雄图像（或启动图像）仅扩展到标题的高度。但是，使用width: 100vh;可以（某种程度上）避免此问题。我不喜欢这样，因为在移动设备上，英雄形象的高度非常大......像5000px的高度。我只是希望它扩展浏览器的EXACT高度。

这是jsFiddle :: http://jsfiddle.net/E7rDG/

Answer 1

您需要将html / body元素的高度设置为100%。

Updated Example

html, body {
    height:100%;
}