Eu tentei fazer div criança ter a altura 100%, mas não está funcionando, então eu gostaria de saber por que não está funcionando: eu dou html, altura do corpo: 100% então .hero height 100% e .hero-image devem ser 100%:

html, body{
    height:100%;
}
.hero{
    width:100%;
    height:100%;
    border:1px solid #0094ff;
    .hero-image{
        width:100%;
        height:100%;
        background-image:url('../images/1.jpg');
        background-size:cover;
    }
}

<section class="hero">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6">
                <div class="hero-image">
                    Hello
                </div>
            </div>
            <div class="col-lg-6">
                <div class="hero-content">
                    <h1>Hey, I Am Mike Ross</h1>
                    <p>
                        Creative Art Director from San Francisco. Husband, photographer, surfer and tech fanatic.
                    </p>
                </div>
                <div class="skills">

                </div>
            </div>
        </div>
    </div>
</section>