why 100vh works but 100% doesn't work in this code?

Question

I want to know why 100% doesn't apply the background color I choose(or at least i can't see it) but 100vh does. For (.container) in css code.

this is my html code:

    <div class="container">
       <div class="box">
         <h1>this is #1</h1>
       </div>

       <div class="box">
         <h1>this is #2</h1>
       </div>
    </div>

and this is my css code (which I can't see aqua color):

.container {
    background-color: aqua;
    height: 100%;
}

.box {
    border:  2px solid;
    padding: 25px;
    box-sizing: border-box;
    height: auto;
    width: 50%;
    float: left;
    text-align: center;
    background-color: antiquewhite;
}

but when I use vh (which I can see aqua color):

.container {
    background-color : aqua;
    height : 100vh;

}