Hauteur d'étirement DIV sous une autre DIV avec hauteur fixe

Question

J'ai fait l'image pour parler moins. J'espère que vous comprendrez. Le problème est que l'étirement de DIV à 100% de hauteur sous un autre DIV avec une hauteur fixe ne s'étire pas correctement.

est ici par exemple de travailler avec: jsfiddle

css:

.controlling-div { 
    width: 200px; 
    height: 200px; 
} 

.stretching-container-div { 
    width: 100%; 
    height: 100%; 
} 

.fixed-height-div { 
    height: 40px; 
    background-color: #ff8811; 
    border-radius: 20px; 
} 

.stretching-height-div { 
    height: 100%; 
    background-color: #ff2266; 
    border-radius: 20px; 
} 

html:

<div class="controlling-div"><!-- width & height can be changed --> 
    <div class="stretching-container-div"><!-- 100%-container --> 
     <div class="fixed-height-div"></div><!-- fixed height --> 
     <div class="stretching-height-div"></div><!-- height 100% - fixed height --> 
    </div> 
</div> 

Merci!

Answer 1

Utilisez ce style pour stretching-height-div. Ici, la hauteur se réfère à 100% moins 40px (hauteur fixe-hauteur-div)

Cela fonctionne très bien pour moi. Voici un DEMO

.stretching-height-div { 
    height: -moz-calc(100% - 40px); /* Firefox */ 
    height: -webkit-calc(100% - 40px); /* Chrome, Safari */ 
    height: calc(100% - 40px); /* IE9+ and future browsers */ 
    background-color: #ff2266; 
    border-radius: 20px; 
} 

Answer 2

jsfiddle

.stretching-height-div { 
    height: calc(100% - 40px); 
    background-color: #ff2266; 
    border-radius: 20px; 
}