Can't change div height to percent

Issue

I am trying to make a responsive div, but for some reason, changing the height to percent just ignores the height. I can only add a fix height.

The div I want to change in the example below is the mainContainer

html, body{
    width:100%;
    height: 100%;
}
.mainContainer{
    width:150%;
    height:550px; /*I want this to be 60% or something*/
    padding:10px;
    background-color:#080808;
    border-radius:5px;
}
.textContainer{ 
    width:55%;
    height:100%;
    float: left;
    background-color:#666666;
    border-radius:10px 0 0 10px;  /*TL TR BR BL*/
}
#map1 {
    width: 45%;
    height: 100%;
    margin-top:-15px;
    float:right;
    display:inline;
    border-radius:0 15px 15px 0;  /*TL TR BR BL*/
}
.contentBox{
    width:96%;
    height:100%;
    color:#F2F2F2;
    font-size:100%;
    padding-right:3%;
    padding-left:3%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}


<section class="mainContainer">
        <div class="textContainer">
            <div class="intro"> 
                <div class="contentBox">
                             </div>
                      </div>
            </div>
           <div id="map1"></div>
</section>

Solution

Your parent div to the element you are trying to give a height to needs to have as set height in order for the you to give the child element a height %.

.wrapper { width: 200px; height: 200px; background-color: black; }
.content { width: 100%; height: 60%; background-color: red; }
<div class="wrapper">
    <div class="content"></div>
</div>

http://jsfiddle.net/fy8Kx/

In your example just make sure the parent of .mainContainer has a height set to it and then you can make the height 60%

Answered By – user934902

Answer Checked By – Pedro (AngularFixing Volunteer)