Устранение неполадок для 100% высоты браузера с помощью CSS

Я хочу увеличить изображение героя на 100% от высоты браузера.

Это то, что у меня есть:

.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; , Мне это не нравится, потому что на мобильных устройствах высота изображения героя действительно велика... например, 5000 пикселей в высоту. Я просто хочу, чтобы он расширил EXACT высоту браузера.

Вот jsFiddle :: http://jsfiddle.net/E7rDG/

1 ответ

Вам нужно установить высоту элементов html/body на 100%.

Обновленный пример

html, body {
 height:100%;
}

licensed under cc by-sa 3.0 with attribution.