Trudno jest udzielić odpowiedzi na Twoje pytanie, ponieważ nie jest jasna Twoja intencja. Gdy w <div class="hero"> umieścisz treść, rozepchnie ona wysokość diva wg potrzeby. Jeśli jednak koniecznie chcesz, aby ten miał 'height:100%;' to pytanie jest - 100% czego? Obecnie rodzicem dla <div class="hero"> jest element <body>, więc jeśli rodzicowi nadasz wysokość, to <div class="hero"> przyjmie 100% wysokości rodzica. Dopisz do stylów (jako przykład) 'body {height:50vh;}'. To zadziała, ale czy o to chodzi?
<!doctype html>
<html>
<head>
<style>
body {height:50vh;}
.hero{
background:url(https://uploads-ssl.webflow.com/5c7da11f03dd897c90e6ef71/5c7da11f03dd896b1fe6f071_pink-flowers-700x371.jpg);
height:100vh;
height:100%;
width:100%;
}
</style>
</head>
<body>
<div class="hero">
</div>
</body>
</html>