How can I make grow an HTML container when it parent grows?

I'm working on my University project. I have a doubt and I don't know how to search it, haha. I have a side nav that has to grow when its parent grows. Also I have a footer that has to be at the bottom of all the page.

Heres the CSS code:

body{
    margin: 0px;
    padding: 0px;
    float: left;
    margin-top: 0px;
    background-color: #bababa;
    width: 100%;
}

main{  //the nav and main page container, not the footer
    position: relative;
}

#navIzquierda{ //the nav
    width: 20%;
    min-height: 90vh;
    height: 100%;
    margin: 0px;
    float: left;
    padding: 5px;
    background-color: #d4d4d4;
}

thank you!