Устранение неполадок для 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.