CSS Middle div height

Question

i have the following css http://jsbin.com/azivip/75/edit i would like to have the yellow div height to fill the space between the blue and green divs. using height inherit seems to make the div goes beyond the green div.

Any idea please?

Thanks

Answer 1

You can use css3 calc():

#testsContainer { 
   height: calc(100% - 140px);
}

Where 140px = 100px of resultsContainer + 40px of buttonsContainer

fiddle

EDIT

For older versions of Firefox use -moz-calc() prefix, for older versions of Chrome/Safari use -webkit-calc() prefix.

Answer 2

Working fiddle

Just change the following css in your code:

 #testsContainer {
     position:absolute; /* replace with position: relative */
     top:100px;  /* height of the above container */
     bottom:40px; /* height of the below container */
     left:0px;
     right:0px;
     margin-top:0px;
     margin-bottom:0px;
     background-color:yellow; 
 }

• Give top value equal to the height of the div#resultsContainer and bottom value equal to the height of the div#buttonsContainer.

• Give left: 0 and right:0. So that the container can occupy the space without using the support of javascript or calc() css property.

• Remove height:inherit

• Replace position: relative with position: absolute