CODEWITHSUNDEEP
csshtml
krafo
krafo

Reputation: 183

CSS Middle div height

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

Upvotes: 2

Views: 2326

Answers (2)

Morpheus
Morpheus

Reputation: 9075

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.

Upvotes: 5

Mr_Green
Mr_Green

Reputation: 41842

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

Upvotes: 4

Related Questions