Height 100% not working for nested div

Question

I was tried to make child div take height 100% but it\'s not working, so I\'d like to know why it is not working: I give html, body height: 100% then .hero height 100% and .

Answer 1

.hero-image is not taking 100% of a parent because container-fluid, row and col-lg-6 height is not 100%

html, body{
    height:100%;
}
.hero{
    width:100%;
    height:100%;
    border:1px solid #0094ff;

}


.heroFullHeight{
    /*height: inherit;*/
     height:100%;

}
.hero-image{
    width:100%;
    height:100%;
    background-image:url('../images/1.jpg');
    background-size:cover;
  	background-color: red;
}

    

        

            

                

                    Hello
                
            
            

                

                    
Hey, I Am Mike Ross
                    

                        Creative Art Director from San Francisco. Husband, photographer, surfer and tech fanatic.