Problema con tamaño de un div

[Jeshua_11_7]

hola que tal, tengo un problema al darle el tamaño de alto de un div, estoy trabajando con porcentajes, tengo este código de mi div

Código HTML:

<div class = "contenedor contenedor-sombra sombra1 sombra2"></div>
 

y esté es mi código CSS

Código CSS:

.contenedor {
    background-color: #f4f4f4;
    width: 50%;
    height: 50%; /*AQUÍ NO FUNCIONA, SOLO SI LO PONGO EN PX SI PERO YO QUIERO EN %*/ 
}
 
.contenedor {
    background-color: #f4f4f4;
    position: absolute;
    width: 50%;
    height: 80%;
}
 
.contenedor-sombra {
    position: relative;
    float: left;
    padding: 1em;
    margin: 10px 30px 0;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
 
.contenedor-sombra:before, .contenedor-sombra:after {
    content: "";
    position: absolute;
    z-index: -2;
}
 
.sombra1:before {
    top: 10px;
    bottom: 10px;
    left: 0;
    right: 50%;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,0.6);
    box-shadow: 0 0 15px rgba(0,0,0,0.6);
    -moz-border-radius: 5px / 100px;
    border-radius: 5px / 100px;
}
 
.sombra2:before {
    right: 0
}
 

el problema es que solo le asigna el ancho en % pero el alto no funciona(solo funciona con px) lo que necesito es que tanto el ancho como el alto sean en %, espero y puedan ayudarme, saludos de antemano.